HTML 表单

一、表单介绍

　　表单目的是为了收集用户信息。在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

　　表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

　　提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

　　表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

二、input 控件(重点)

　　<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。

　　

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
	hidden	隐藏当前的 input 元素
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数
disabled	disabled	当input元素加载时禁用此元素
readonly	readonly	设置输入字段为只读
alt	text	定义图像输入的替代文本
size	number_of_char	定义输入的字段的宽度
src	url	定义以提交按钮形式显示的图像的url
accept	mime_type	设置通过文件上传来提交的文件的类型

三、label标签

　　label 标签为 input 元素定义标注（标签）。

　　作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

　　有两种方法来绑定元素：

　　1、嵌套法：当只需绑定第一个元素时，用 label 标签包裹即可

<label> <input type="text"></label>

　　2、for属性绑定:当有多个元素时，需用 for 属性来规定 label 与哪个表单元素绑定。 

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

　　

四、textarea控件(文本域)

　　如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

五、select 下拉菜单

　　使用select控件定义下拉菜单的基本语法格式如下：

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

　　select 中有两个常用的属性：

multiple="multiple"          设置该属性，可以支持多选
size="8"                     设置该属性，可以改变下拉列表的高度，也可以用height和width来设置宽高

　　Demo：

<select name="test" multiple="multiple" size="8" >
　　<option>浙江</option>
　　<option selected="selected">辽宁</option>
　　<option>北京</option>
　　<option selected="selected">天津</option>
　　<option>广州</option>
　　<option>湖北</option>
</select>

　　Tips: 

　　1、<select></select>中至少应包含一对<option></option>。

　　2、在option 中定义selected =" selected "时，当前项即为默认选中项。

六、button 标签

　　<button> 元素定义可点击的按钮。

　　语法：

<button type="button">我是按钮</button>

　　type 属性的值可以是button（普通按钮）、reset（重置按钮）、submit（提交按钮） 三个值，默认是button。

七、表单域

　　在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

　　语法：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

　　  属性：

属性	说明
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）(必须有)
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）
name	规定识别表单的名称（对于 DOM 使用：document.forms.name） 以区分同一个页面中的多个表单
novalidate	规定浏览器不验证表单
target	规定 action 属性中地址的目标（默认：_self）

 

　　注意： 每个表单都应该有自己表单域。

 　　 扩展：表单提交

　　　　 1、form 标签是表单标签；

　　　　　action属性设置提交的服务器地址（必须有）；

　　　　　method 属性设置提交的方式GET（默认值）或 POST；

　　　    2、表单提交的时候，数据不会发送给服务器的三种情况：

　　　　　　① 表单想没有 name 属性值；

　　　　　　② 单选、复选（下拉列表中的 option 表示）都需要添加 value 属性，以便发送给服务器；

　　　　　　③ 表单项不在提交 form 标签中；

　　　　3、GET请求与POST请求

　　　　　　GET请求的特点是：

　　　　　　　　① 浏览器地址栏中的地址是： action 属性[+?+请求参数] 请求参数的格式是： name=value&name=value

　　　　　　　　② 不安全，参数在地址栏可以看到

　　　　　　　　③ 它有数据长度的限制

　　　　　　POST 请求的特点是：

　　　　　　　　① 浏览器地址栏中只有 action 属性值； 

　　　　　　　　② 相对于 GET 请求要安全；

　　　　　　　　③ 理论上没有数据长度的限制；

八、fieldset 与 legend 标签

　　<fieldset> 元素组合表单中的相关数据，将表单内的相关元素分组，打包。

　　<legend> 元素为 <fieldset> 元素定义标题。

　　语法与案例：

<form action="">
　　<fieldset>
	<legend>学生信息：</legend>
	姓名:<input type="text" name="firstname" value="Tony">	
	联系电话:<input type="text" name="lastname" value="秦皇岛"><br>
	<input type="submit" value="保存">
　　</fieldset>
</form> 

　

　　更多的标签学习请参考这里：http://www.w3school.com.cn/html/index.asp