HTML表单用法
HTML 表单用于搜集不同类型的用户输入。
1.<form> 元素：<form> 元素定义 HTML 表单
1.<form>属性：
- accept-charset：charset_list，规定服务器可处理的表单数据字符集；
- action：URL，规定当提交表单时向何处发送表单数据；
- autocomplete（H5）：on/off，规定是否启用表单的自动完成功能；
-
enctype：规定在发送表单数据之前如何对其进行编码，属性可能的值有：
1.application/x-www-form-urlencoded；
2.multipart/form-data；
3.text/plain； - method：get/post，规定用于发送form-data的http方法；
- name：规定表单的名称；
- novalidate（H5）：novalidate，如果使用该属性，则提交表单时不进行验证；
- target：_blank/_self/_parent/_top/framename，规定在何处打开action URL；
2.表单元素
1.<input>元素：
-
<input> 元素不同的 type 属性：
1.<input type="text"> 定义供文本输入的单行输入字段：
<div class="username">
<label for="username">your name</label>
<input id="username" type="text" name="username" value="bunny">
</div>
2.<input type="password"> 定义密码字段：
<div>
<label for="password">your password</label>
<input id="password" type="password" name="password" placeholder="please input your password">
</div>
3.<input type="submit"> 定义提交表单数据至表单处理程序的按钮：
<input type="submit" value="Submit"/>
4.<input type="radio"> 定义单选按钮：注意name一致
<div class="sex">
<label>your gender</label>
<input type="radio" name="sex" value="male" checked> male
<input type="radio" name="sex" value="female"> female
</div>
5.<input type="checkbox"> 定义复选框：注意name一致
<div class="hobby">
<label>your hobbies</label>
<input type="checkbox" name="hobby" value="read" checked> reading
<input type="checkbox" name="hobby" value="movie"> watching movies
<input type="checkbox" name="hobby" value="piano"> playing piano
<input type="checkbox" name="hobby" value="paint"> painting
</div>
6.<input type="button> 定义按钮
7.<input type="number">（H5）用于应该包含数字值的输入字段：能够对数字做出限制
<input type="number" name="quantity" min="1" max="5">
8.<input type="date"> （H5） 用于应该包含日期的输入字段：根据浏览器支持，日期选择器会出现输入字段中
9.<input type="color"> （H5） 用于应该包含颜色的输入字段：根据浏览器支持，颜色选择器会出现输入字段中
10.<input type="range"> （H5） 用于应该包含一定范围内的值的输入字段：根据浏览器支持，输入字段能够显示为滑块控件
<input type="range" name="points" min="0" max="10">
11.<input type="month"> （H5） 允许用户选择月份和年份：根据浏览器支持，日期选择器会出现输入字段中
12.<input type="week"> （H5） 允许用户选择周和年：根据浏览器支持，日期选择器会出现输入字段中
13.<input type="time"> （H5） 允许用户选择时间（无时区）：根据浏览器支持，时间选择器会出现输入字段中
14.<input type="datetime"> （H5） 允许用户选择日期和时间（有时区）：根据浏览器支持，日期选择器会出现输入字段中
15.<input type="datetime-local"> （H5） 允许用户选择日期和时间（无时区）：根据浏览器支持，日期选择器会出现输入字段中
16.<input type="email"> （H5） 用于应该包含电子邮件地址的输入字段：根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证
17.<input type="search"> （H5） 用于搜索字段（搜索字段的表现类似常规文本字段）
18.<input type="tel"> （H5） 用于应该包含电话号码的输入字段：目前只有 Safari 8 支持 tel 类型
19.<input type="url"> （H5） 用于应该包含 URL 地址的输入字段：根据浏览器支持，在提交时能够自动验证 url 字段 -
<input> 元素的其他属性：
1.value 属性规定输入字段的初始值
2.readonly 属性规定输入字段为只读（不能修改）：<input type="text" name="firstname" value="John" readonly>，属性不需要值
3.disabled 属性规定输入字段是禁用的，被禁用的元素是不可用和不可点击的：<input type="text" name="firstname" value="John" disabled>
4.size 属性规定输入字段的尺寸（以字符计）：<input type="text" name="firstname" value="John" size="40">
5.maxlength 属性规定输入字段允许的最大长度：该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码
6.autocomplete（H5）属性规定表单或输入字段是否应该自动完成：on/off
7.autofocus（H5） 属性是布尔属性，规定当页面加载时 <input> 元素应该自动获得焦点，无属性值
8.form （H5） 属性规定 <input> 元素所属的一个或多个表单
9.formaction（H5） 属性规定当提交表单时处理该输入控件的文件的 URL
10.formenctype （H5） 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单），覆盖 <form> 元素的 enctype 属性
11.formmethod （H5） 属性定义用以向 action URL 发送表单数据（form-data）的** HTTP 方法，覆盖 <form> 元素的 method 属性
12.formnovalidate （H5）** 属性规定在提交表单时不对 <input> 元素进行验证，覆盖 <form> 元素的 novalidate 属性，可用于 type="submit"
13.formtarget （H5） 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应，覆盖 <form> 元素的 target 属性，可与 type="submit" 和 type="image" 使用
14.height 和 width（H5） 属性规定 <input> 元素的高度和宽度，仅用于 <input type="image">
15.list （H5） 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项
16.min 和 max （H5） 属性规定 <input> 元素的最小值和最大值，适用于如下输入类型：number、range、date、datetime、datetime-local、month、time 、week
17.multiple （H5） 属性是布尔属性，规定允许用户在 <input> 元素中输入一个以上的值，无属性值
18.pattern （H5） 属性规定用于检查 <input> 元素值的正则表达式，适用于以下输入类型：text、search、url、tel、email、password
19.placeholder（H5） 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述），适用于以下输入类型：text、search、url、tel、email 、password
20.required （H5） 属性是布尔属性，规定在提交表单之前必须填写输入字段，无属性值
21.step （H5） 属性规定 <input> 元素的合法数字间隔，step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围
2.<select>元素：下拉列表，属性：
<select name="city">
<option value="beijing">Beijing</option>
<option value="shanghai" selected="selected">Shanghai</option>
<option value="hangzhou">Hangzhou</option>
</select>
- autofocus（H5）：规定在页面加载后文本区域自动获得焦点
- disabled：规定禁用该下拉列表
- form（H5）：规定文本区域所属的一个或多个表单
- multiple：规定可选择多个选项
- name：名称
- required（H5）：规定文本区域是必填的
- size：规定下拉列表中可见选项的数目
3.<option>元素：定义元素待选择的选项，属性：
- disabled：规定此选项应在首次加载时被禁用
-
label：定义当使用** <optgroup>** 时所使用的标注
Paste_Image.png
- selected：规定选项（在首次显示在列表中时）表现为选中状态
- value：定义送往服务器的选项值
4.<textarea>元素：定义多行输入字段（文本域），属性：
- autofocus（H5）：规定在页面加载后文本区域自动获得焦点
- cols：规定文本区内的可见宽度
- disabled：规定禁用该文本区
- form（H5） ：规定文本区域所属的一个或多个表单
- maxlength（H5） ：规定文本区域的最大字符数
- name：定义文本区域名称
- placeholder（H5） ：规定描述文本区域预期值的简短提示
- readonly：规定文本区为只读
- required（H5） ：规定文本区域是必填的
- rows：规定文本区内的可见行数
- wrap（H5） ：规定当在表单中提交时，文本区域中的文本如何换行
