内容:表单标签插入组件(经常使用)
##############################################################

form表单标签和input组件
<form>
用户名称:<input type="text" name="username" value="hehe" /><br/>
输入密码:<input type="password" name="psw" /><br/>
选择性别:<input type="radio" name="sex" value="nan" />男
<input type="radio" name="sex" value="nv" checked="checked"/>女<br/>
选择技术:<input type="checkbox" name="tech" value="java" />JAVA
<input type="checkbox" name="tech" value="html" />HTML
<input type="checkbox" name="tech" value="css" />CSS<br/>
一个按钮:<input type="button" value="有个按钮" onclick="alert('有个按钮,我弹!')"/><br/>
隐藏组件:<input type="hidden" name="zhangsan" value="20"/><br/>
选择文件:<input type="file" name="file" /><br/>
图片组件:<input type="image" src="1.jpg" /><br/> 选择国家:
<select name="country">
<option value='none'>--选择国家--</option>
<option value="cn" selected="selected">中国</option>
<option value="usa">美国</option>
<option vaue='en'>英国</option>
</select>
<br/>
个人介绍:<textarea rows="4" cols="20"></textarea>
<input type="submit" value="提交"/><input type="reset" value="恢复默认"/> </form>

如果这些值需要提交到服务端的,每个组件的属性都需要name

####################################################################################
浏览器两种提交方式
以下get和post提交数据来自代码
<!--
    form标签中的action用于明确目的地。 method属性用于明确提交的方式。
    方式有两种 get post。
    
    get提交的数据:
    地址栏:http://192.168.1.223:9090/?user=abc&psw=12&repsw=12&sex=nan&tech=java&country=cn
    
    GET /?user=abc&psw=12&repsw=12&sex=nan&tech=java&country=cn HTTP/1.1
    Accept: application/x-shockwave-flash, image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/x-ms-xbap, application/x-ms-application, */*
    Accept-Language: zh-cn
    Accept-Encoding: gzip, deflate
    User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET4.0C; .NET4.0E)
    Host: 192.168.1.223:9090
    Connection: Keep-Alive
    
    
    
    post提交:
    地址栏:http://192.168.1.223:9090/
    
    POST / HTTP/1.1
    Accept: application/x-shockwave-flash, image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/x-ms-xbap, application/x-ms-application, */*
    Accept-Language: zh-cn
    Content-Type: application/x-www-form-urlencoded
    Accept-Encoding: gzip, deflate
    User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET4.0C; .NET4.0E)
    Host: 192.168.1.223:9090
    Content-Length: 56
    Connection: Keep-Alive
    Cache-Control: no-cache
    
    user=abcd&psw=123&repsw=123&sex=nv&tech=html&country=usa
    
    
    GET和POST的区别:
    区别1:地址栏是否显示信息。
        GET提交,将提交的数据显示在地址栏。
        POST提交,提交数据不显示在地址栏。
        
    区别2:敏感信息是否安全。
        GET提交,提交敏感信息不安全。
        POST提交,提交敏感信息安全。
        
    区别3:数据的体积。
        GET提交,信息存储到地址栏,存储的信息体积有限。
        POST提交,可以提交大体积数据信息。
    
    区别4:提交信息的http封装形式不同。
        GET提交,将提交信息封装到了请求行。
        POST提交,将提交信息封装到了请求体。
        
        
    综上所述:表单提交,建议使用POST.
    
    
    
    问题1:如果表单加入了增强型的校验(只有所有选项都符合规则的情况下,才可以提交)
        这时,服务端收到数据后,还需要校验吗?
        需要,因为客户端有可能避开校验,提交错误的数据到服务端,所以为了安全性,服务端必须做校验。
        
        
    和服务端交互有三种方式:
    1,地址栏输入。get
    2,超链接。get
    3,表单。get post
    
    问题2:服务端如果进行校验,页面还需要做校验吗?
        需要,为了减轻服务端的压力,同时为了增强用户的体验效果。
    
     -->

#############################################
加入表格标签,好看,下面实现简单提交

<body>
<form action="127.0.0.1:8080" method="get">
<table border="1" bordercolor="blue" width="700px" cellspacing="0" cellpadding="10">
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<th>用户名称:</th>
<td><input type="text" name="usename"></td>
</tr>
<tr>
<th>输入密码:</th>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td>选择性别:</td>
<td><input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female">女</td>
</tr>
<tr>
<td>选择技术:</td>
<td><input type="checkbox" name="tech" value="java">java
<input type="checkbox" name="tech" value="HTML">HTML
</td>
</tr>
<tr>
<td>一个按钮</td>
<td><input type="button" value="按钮" onclick="alert('love')"></td>
</tr>
<tr>
<th colspan="2"><input type="submit" value="提交"></th>
</tr>
</table> </form>
</body>

##简单服务器用于执行上面的提交:

public static void main(String[] args) throws IOException
{
ServerSocket ss = new ServerSocket(8080);
Socket s = ss.accept();
InputStream is = s.getInputStream();
byte[] buf = new byte[1024];
int len = is.read(buf);
String str = new String(buf,0,len);
System.out.println(str); PrintWriter out = new PrintWriter(s.getOutputStream(),true);
out.println("<font color='blue' size='7'>注册成功</font>"); s.close();
ss.close();
}

############################################################################
其他标签

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<body>
<b>演示</b><i>一下</i><u>其他</u>的<strong>标签</strong>。语义化
X<sub>2</sub> X<sup>2</sup>
<marquee behavior="slide" direction="down">哇,我会飞啦!</marquee>
<pre>
class Demo
{
public static void main(String[] args)
{
System.out.println("hello");
}
}
</pre>
</body>

028、HTML 标签3表单标签插入组件的更多相关文章

  1. [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  2. 5.22 HTML 列表标签和表单标签

    1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li:  listitem  列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...

  3. Kure讲HTML_列表标签及表单标签

    首先我上个图来告诉大家什么是列表 左侧的这一部分就可以称为是列表或者叫树,其实我们可以通过div+css实现列表,可是考虑语义化的问题,我们还是看看html提供好的列表标签,html提供了两种列表,一 ...

  4. Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  5. HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  6. 制作Html标签以及表单、表格内容

    制作Html一般用DW(......),Html全称为(Hyper Text Markup Language   超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...

  7. struts2:表单标签

    目录 表单标签1. form标签2. submit标签3. checkbox标签4. checkboxlist标签5. combobox标签6. doubleselect标签7. head标签8. f ...

  8. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  9. SpringMVC 表单标签 & 处理静态资源

    使用 Spring 的表单标签 通过 SpringMVC 的表单标签可以实现将模型数据中的属性和 HTML 表单元素相绑定,以实现表单数据更便捷编辑和表单值的回显. form 标签 一般情况下,通过 ...

随机推荐

  1. Linux的IO模型

    在输入输出系统一文中介绍了系统内核操作IO设备的机制. 我们了解到内核可以直接访问IO设备, 用户进程无法IO设备. 就是说IO操作需要分为两个过程, 内核从IO设备读取数据保存到内核空间, 将数据由 ...

  2. 微信公众号支付回调页面处理asp.net

    1.在商家微信商户通中配置回调url 2.在提交订单时传入的回调页面中获取支付成功后或支付失败后的参数,对订单进行处理 public partial class gzpayCallback : Sys ...

  3. docker下安装vim

    进入docker内部后,发现之前的vim命令用不了了,这个时候就需要重新安装vim,具体步骤如下: 更新源 apt-get update 安装vim apt-get install vim

  4. 【Java并发编程】12、ThreadLocal 解决SimpleDateFormat非线程安全

    大致意思:Tim Cull碰到一个SimpleDateFormat带来的严重的性能问题,该问题主要有SimpleDateFormat引发,创建一个 SimpleDateFormat实例的开销比较昂贵, ...

  5. Java 与C++区别:复写(override)

    C++中子类复写父类virtual方法要做到函数参数和返回值类型都一致,而Java中返回值类型可以不同,即子类复写的方法返回值类型可以使父类方法返回值类型的一个子类型.比如 返回类型兼容情况 Java ...

  6. django-csrf攻击

    一.原理 csrf(Cross Site Request Forgery, 跨站域请求伪造:CSRF 攻击允许恶意用户在另一个用户不知情或者未同意的情况下,以他的身份执 行操作. CSRF 攻击是黑客 ...

  7. PeopleSoft面试题(服务器相关)

    如何配置app服务器与web服务器的负载均衡?请详细说明. App Server: 在配置App Server负载均衡时候,通过webserv目录下的configuration.properties文 ...

  8. SD从零开始55-56, 风险管理, 付款卡

    [原创] SD从零开始55 风险管理的内容 应收款风险最小化Risk Minimization for Receivables 每个信用政策的目的是减少由客户应收款带来的风险: 连同信用管理,你也有权 ...

  9. ArcGIS基于DEM计算水流方向的方法(D8算法)

    ArcGIS采用D8算法计算水流方向(9.3.1后新增),输入数据应首先完成了洼地填充处理: One of the keys to deriving hydrologic characteristic ...

  10. session与cookie的区别和用法

    一.session 1.保存在服务器的,每个人存一份2.可以存储任何类型数据3.有一个默认过期时间注意:在所有使用session的页面最顶端要开启session---session_start();存 ...