表单
- html5对表单的改进
html5一个重要的特性就是对表单的改进，html5引入了新的表单元素、输入类型和属性以及内置的对必填字段、电子邮件地址、URL以及定制模式的验证。
1）添加的新类型
电子邮件地址：<input type="mail">
搜索框：<input type="search">
URL框：<input type="url">
2)属性
accept --- 限制用户可上传的文件类型
autocomplete-- 默认值是on,如果设置为off，就会关闭浏览器的对该表单或该字段的自动填写功能
autofocus -- 页面加载后将焦点放到该字段
multiple -- 允许输入多个电子邮件地址或者上传多个文件
list --- 将datalist 和 input 联系起来
maxlength -- 指定textarea的最大字符数
pattern -- 定义一个用户所输入的文本在提交之前必须遵循的模式
placeholder -- 文本框中的提示文本
required -- 说明该字段是必填项
formnovalidate -- 关闭html5的自动验证功能，应用于提交按钮
novalidate -- 关闭html5的自动验证功能，应用于表单元素
- 创建元素
使用form元素创建表单，form元素常用的属性有name, method , action。
name -- 提交表单时，服务器对表单识别
method -- 指定http请求的类型，get 或者 post
action -- 指定脚本的url
- 处理表单
1）验证表单
对用户输入的字段中的内容进行验证，判断输入的文本内容是否符合要求的格式
2）对表单元素进行组织
使用fieldset将相关的表单元素组织在一起。在fieldset元素下面，第一行输入legend(需要的话)，legend元素用于定义一组表单元素的摘要。
使用legend元素则必须要使用fieldset，legend元素一定要是fieldset元素的第一行。
由于各个浏览器对legend元素的支持度不同，所以有时会使用h1~h6标题元素来替代legend,来表示表单元素的上下文。
3）创建文本框
<label for="idlabel">,访问者识别文本框的标签。<input type="text" name="" id="" value="" placeholder="" required="required" autocomplete="off" autofocus="autofocus" size="n" maxlength="m" >
虽然label标签是可选的，但是建议使用，label标签对提高用户访问性和可用性有很大的帮助。
label标签中的for属性 必须和 input文本框中的id属性值一致。
当点击label标签时，input文本框就会获得焦点。
4）创建密码框
<input type="password" name="" id="" class="" size="" maxlength="">
5) 创建电子邮件地址、url地址、电话
电子邮件：<input type="mail" name="" id="" class="" size="" pattern="">
url地址： type="url"
电话：type="tel"
6) 创建单选按钮
<input type="radio" name="name1" value="value1" id="id1" checked>
<label for="id1"> radio1 label</label>
<input type="radio" name="name1" value="value2" id="id2">
<label for="id2">radio2 label</label>
所有单选按钮的name值必须相同
7）创建复选框
input 的 type值为checkbox
8) 创建文本区域
<textarea name="" id="" rows="" cols="" ></textarea>
9) 创建选择框
选择框有两种html元素构成：select 和 option ，通常在select中添加name属性，在每个option标签中添加value属性。
<select name="" id="" size="n" multiple >
<option value="">
</option>
</select>
select的size属性，表示选择框的高度，以行为单位，multiple表示多选，如果没有设置size属性，则必须有一个option字段添加了selected属性，必须 显示的表示出被选择的项。如果设置了size属性，则不需要。
可以为选项分组：
<select>
<optgroup label="分组的标题名">
<option>
</option>
</optgroup>
</select>
10) 让访问者上传文件
<form method="post" action="" enctype="multipart/form-data">
<label for=""></label>
<input type="file" id="" name="" multiple>
</form>
form标签的enctype属性，是确保以正确的格式上传文件。
input元素的type=file,会自动创建browse(浏览)按钮，browse按钮用于选择本地文件上传。
11) 创建隐藏字段
input 的 type 值 为hidden, value包含要隐藏字段要提交给服务器的值。隐藏字段的值会一并提交给服务器
要访问访问者可见但不可修改的表单元素，有两种方法：第一种，添加disabled属性，禁用属性 。 第二种，使用readonly属性，只读属性可以获得焦点，可以选择和复制里面的文本。
12）创建提交按钮
<input type="submit">
图像提交按钮：<input type="image" src="" alt="">
结合文本和图像的提交按钮：<button type="submit" ><img src="" alt=""> </button>
13)禁用表单元素
添加disabled属性，被禁用的表单元素的数据无法提交给服务器。
14）根据状态为表单设置样式
使用伪类，根据表单的状态设置样式。
表单的状态有以下常用的几类：
：focus -- 获得焦点
：checked -- 选中的单选按钮或者复选框
：disabled --具有disabled属性的字段
:enable -- 与disabled相反
：invalid -- 与pattern模式不匹配，无效的电子邮件地址
:valid -- 与：invalid相反
