学习HTML5表单笔记

1.HTML5表单元素

datalist元素：用于为文本框提供一个可选择的列表，，使用它可为表单小部件提供建议的、自动完成的值，并使用一些option子元素来指定要显示的值。然后使用list属性将数据列表绑定到一个文本域（通常指一个《input》元素）。

一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本。通常，这是作为一个下拉框向用户展示，在输入框中输入可能匹配的内容。（option也可以写成下面这样）

2.HTML5表单新增属性
①autocomplete属性：
规定表单是否应该启用自动完成功能：自动完成允许浏览器预测对字段的输入，当用户在字段开始输入时，浏览器基于之前输入过的值，显示出在字段中填写的选项。当autocomplete属性值为on时表启用自动完成功能，off时表关闭。该属性试用于《form》以及下面的《input》类型：text、search、telephone、email、password、datepickers、rang、color。


如：姓名的文本框autocomplete属性值为on，会显示之前输入过的名字，而邮件的autocomplete属性值为off，则不会出现之前输入过的邮件。

②autofocus属性：规定在页面加载时，域自动地获得焦点（闪烁的光标）。适用于所有input标签的类型：

③form属性：
规定输入域所属的一个或多个表单。适用于所有input标签的类型。Form属性必须引用所属表单的id。


④multiple属性:规定输入域中可选多个值，适用于email和file类型的input标签

⑤novalidate属性：
规定在提交表单时不应该验证form或input域。适用于 form ,以及 input 的下面类型：text、search、url、telephone、email、password、datepickers、range、color。

⑥pattern属性
规定用于验证input域的模式(pattern)。模式(pattern)是正则表达式。该属性适用于 input 标签的以下类型：text、search、url、telephone、email、password。


⑦placeholder属性：
提供一种提示(hint)，描述输入域所期待的值。适用于 input 标签的以下类型：text、search、url、telephone、email、password。提示(hint)会在输入域为空时显示出现，会在输入域获得焦点时消失。


⑧require属性：
规定必须再提交之前填写输入域（不能为空），适用于 input 标签的以下类型：text、search、url、telephone、email、password、datepickers、number、checkbox、radio、file。

3.HTML5输入类型
①input类型——email
用于应该包含email地址的输入域。在提交表单时，会自动验证email域的值。
（要输入正确的邮件名，如1256@qq.com）

②input类型——url：用于应该包含URL地址的输入域。在提交表单时，会自动验证url域的值。
（要输入正确的url，也就是网址，如http://www.baidu.com）

③input类型——number
用于应该包含数值的输入域。属性max设定允许输入的最大值，min设定允许输入的最小值，step设定合法数字间隔（如，step值为2，则合法数字为-2，0，2，4等）


④input类型——range
用于应该包含一定范围内数字值的输入域。Range类型显示为滑动条。同样的range也有max、min、value、step属性与上面所讲的number中的一致。

⑤input类型——Date Pickers（日期选择器）
HTML5拥有多个可供选取日期和时间的新输入类型：
●date:选取日、月、年。
●month: 选取月、年。
●week: 选取周、年。
●time: 选取时间（小时和分钟）
●datetime: 选取时间、日、月、年（UTC时间）注：此类型已被弃用，目前大多数浏览 器都不在支持。
●datetime-local：选取时间、日、月、年（本地时间）。

⑥input类型——color：用于选择颜色