一、表单介绍
表单目的是为了收集用户信息。在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在 HTML 中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域 3 个部分构成。
表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的 url 地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
二、input 控件(重点)
<input/>标签为单标签，type 属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了 type 属性之外，<input/> 标签还可以定义很多其他的属性，其常用属性如下表所示。
属性 属性值 描述
text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
type 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
