主题
HTML5表单新属性
全新的form属性
在HTML5中新增了两个form属性，分别为autocomplete属性和novalidate属性，下面将对这两种属性做详细讲解。
1. autocomplete属性
autocomplete属性用于指定表单是否有自动完成功能，所谓自动完成是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入。
autocomplete属性有2个值，对它们的解释如下：
on：表单有自动完成功能。off：表单无自动完成功能。
autocomplete属性示例代码如下：
html
<form id="formBox" autocomplete="on">值得一提的是，autocomplete属性不仅可以用于<form>标签，还可以用于所有输入类型的<input />标签。
2. novalidate属性
novalidate属性指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时，可以关闭整个表单的验证，这样可以使<form>标签内的所有表单控件不被验证，novalidate属性的取值为它自身，示例代码如下：
html
<form action="form_action.asp" method="get" novalidate="novalidate">上述示例代码对form标签应用novalidate="novalidate"属性，来取消表单验证。
全新的表单控件<datalist>
在HTML5中新增了一些的控件，如<datalist>、<keygen>等，使用这些元素可以强化表单功能，其中<datalist></datalist>控件用于定义输入框的选项列表，在网页中比较常见。
网页中的列表通过<datalist></datalist>内的<option></option>进行创建。如果用户不希望从列表中选择某项，也可以自行输入其他内容。 <datalist></datalist>控件通常与<input />控件配合使用，来定义input的取值。在使用<datalist>控件时，需要通过id属性为其指定一个唯一的标识，然后为input控件指定list属性，将该属性值设置为datalist对应的id属性值即可。
html
<label>
Choose a browser from this list:
<input list="browsers" name="myBrowser"/>
</label>
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Internet Explorer"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>效果如下:
全新的input控件类型
在HTML5中，增加了一些新的input控件类型，通过这些新的控件，可以丰富表单功能，更好的实现表单的控制和验证，下面将详细讲解这些新的input控件类型。
1.email类型< input type="email" />
email类型的input控件是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。
2.url类型< input type="url" />
url类型的input控件是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器；如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。
3.tel类型< input type="tel" />
tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此tel类型通常会和pattern属性配合使用
4.search 类型< input type="search" />
search 类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符，例如站点搜索或者Google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。
5.color类型< input type="color" />
color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。单击color类型文本框，可以快速打开拾色器面板，方便用户可视化选取一种颜色。
注意：
需要注意的是，不同的浏览器对url类型的输入框的要求有所不同，在多数浏览器中，要求用户必须输入完整的URL地址，并且允许地址前有空格的存在。例如，输入<https://www.baidu.com/。>
6.number类型< input type="number" />
number类型的input控件用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。
number类型的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等。具体属性说明如下：
- value：指定输入框的默认值。
- max：指定输入框可以接受的最大的输入值。
- min：指定输入框可以接受的最小的输入值。
- step：输入域合法的间隔，如果不设置，默认值是1。
7.range类型< input type="range" />
range类型的input控件用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与number类型一样，通过min属性和max属性，可以设置最小值与最大值，通过step属性指定每次滑动的步幅。
8. Date pickers类型<input type= date, month, week…" />
Date pickers类型是指时间日期类型，HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期，具体如表所示。
| 时间和日期类型 | 说明 |
|---|---|
| date | 选取日、月、年 |
| month | 选取月、年 |
| week | 选取周和年 |
| time | 选取时间（小时和分钟） |
| datetime | 选取时间、日、月、年（UTC时间） |
| datetime-local | 选取时间、日、月、年（本地时间） |
在上表中，UTC是Universal Time Coordinated的英文缩写，即协调世界时，又称世界标准时间。简单地说，UTC时间就是0时区的时间。例如，如果北京时间为早上8点，则UTC时间为0点，即UTC和北京的时差为8。
注意： 对于浏览器不支持的input控件输入类型，将会在网页中显示为一个普通输入框。
全新的input属性
在HTML5中，还增加了一些新的input控件属性，用于指定输入类型的行为和限制。例如autofocus、min、max、pattern等，下面将对这些全新的input属性做具体讲解。
1. autofocus属性
在HTML5中，autofocus属性用于指定页面加载后是否自动获取焦点，将标签的属性值指定为true时，表示页面加载完毕后会自动获取该焦点。
2.form属性
在HTML5之前，如果用户要提交一个表单，必须把相关的控件元素都放在表单内部，即<form>和</form>标签之间。在提交表单时，会将页面中不是表单子元素的控件直接忽略掉。
HTML5中的form属性，可以把表单内的子元素写在页面中的任一位置，只需为这个元素指定form属性并设置属性值为该表单的id即可。此外，form属性还允许规定一个表单控件从属于多个表单。
注意： form属性适用于所有的input输入类型。在使用时，只需引用所属表单的id即可。
3. list属性
在上面的小节中，已经学习了如何通过datalist元素实现数据列表的下拉效果。而list属性用于指定输入框所绑定的datalist元素，其值是某个datalist元素的id。
4.multiple属性
multiple属性指定输入框可以选择多个值，该属性适用于email和file类型的input元素。multiple属性用于email类型的input元素时，表示可以向文本框中输入多个E-mail地址，多个地址之间通过逗号隔开。multiple属性用于file类型的input元素时，表示可以选择多个文件。
5.min、max和step属性
HTML5中的min、max和step属性用于为包含数字或日期的input输入类型规定限值，也就是给这些类型的输入框加一个数值的约束，适用于date pickers、``number和range`标签。具体属性说明如下：
- max：规定输入框所允许的最大输入值。
- min：规定输入框所允许的最小输入值。
- step：为输入框规定合法的数字间隔，如果不设置，默认值是1。
由于前面介绍input元素的number类型时，已经讲解过min、max和step属性的使用，这里不再举例说明。
6.pattern属性
pattern属性用于验证input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配（可以简单理解为表单验证）。pattern属性适用于的类型是：text、search、url、tel、email和password的<input/>标签。常用的正则表达式如下所示。
javascript
// 数字
^[0-9]*$
// n位的数字
^\d{n}$
// 至少n位的数字
^\d{n,}$
// m-n位的数字
^\d{m,n}$
// 零和非零开头的数字
^(0|[1-9][0-9]*)$
// 非零开头的最多带两位小数的数字
^([1-9][0-9]*)+(.[0-9]{1,2})?$
// 正数、负数、和小数
^(-|+)?\d+(.\d+)?$
// 非负整数
^\d+$ 或 ^[1-9]\d*|0$
// 非正整数
^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
// 汉字
^[\u4e00-\u9fa5]{0,}$
// 英文和数字
^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
// 由26个英文字母组成的字符串
^[A-Za-z]+$
// 由数字和26个英文字母组成的字符串
^[A-Za-z0-9]+$
// 由数字、26个英文字母或者下划线组成的字符串
^\w+$ 或 ^\w{3,20}$
// 中文、英文、数字包括下划线
^[\u4E00-\u9FA5A-Za-z0-9_]+$
// Email地址
^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
// URL地址
[a-zA-z]+://[^\s]* 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$
// 身份证号(15位、18位数字)
^\d{15}|\d{18}$
// 以数字、字母x结尾的短身份证号码
^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
// 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
^[a-zA-Z][a-zA-Z0-9_]{4,15}$
// 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
^[a-zA-Z]\w{5,17}$7.placeholder属性
placeholder属性用于为input类型的输入框提供相关提示信息，以描述输入框期待用户输入何种内容。在输入框为空时显式提示信息，而当输入框获得焦点时，提示信息消失。
注意：
placeholder属性适用于type属性值为text、search、url、tel、email以及password的<input/>标签。
8.required属性
required属性用于判断用户是否在表单输入框中输入内容，当表单内容为空时，则不允许用户提交表单。