HTML5表单

HTML5表单

HTML5中增加了表单方面的诸多功能，包括增加input输入类型、表单元素、form属性和input属性等。

新的input输入类型

email类型的input元素是一种专门用于输入E-mail地址的文本输入框，在提交表单的时候，会自动验证email输入框的值，如果不是一个有效的E-mail地址，该输入框不允许提交该表单。

<input type="email" name="user_email">

url类型的input元素提供用于输入url地址这类特殊文本的文本框。当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交。

<input type="url" name="user_url">

number类型的input元素提供用于输入数值的文本框，可以设定所接受的数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。

<input type="number" name="number1"min="1" max="20" step="4">

max:规定允许的最大值

min：规定允许的最小值

step：规定合法的数字间隔（例如step="4",合法数字是-4、0、4、8等）

value：规定默认值

range类型的input元素提供用于输入包含一定范围内数字值的文本框，在网页中显示为滑动条。

<input type="range" name="range1"min="1" max="30" step="4">

max:规定允许的最大值

min：规定允许的最小值

step：规定合法的数字间隔（例如step="4",合法数字是-4、0、4、8等）

value：规定默认值

Date Pickers日期检出器是网页中经常要用到的一种控件，HTML5提供了多个可用于选取日期和时间的输入类型，即6中日期检出器控件，分别用于选择以下日期格式：日期、月、星期、时间、日期+时间和日期+时间+时区。

输入类型	HTML代码	功能与说明
date	<input type="date">	选取日、月、年
month	<input type="month">	选取月、年
week	<input type="week">	选取周和年
time	<input type="time">	选取时间小时和分钟
datetime	<input type="datetime">	选取时间、日、月、年
datetime-local	<input type="datetime-local">	选取时间、日、月、年

date、month、week、time类型支持使用一些属性来限定时间的大小范围或合法的时间间隔。

max:规定允许的最大值

min：规定允许的最小值

step：规定合法的时间间隔

value：规定默认值

search类型的input元素提供用于输入搜索关键词的文本框。

<input type="search" name="search1">

tel类型的input元素提供专门用于输入电话号码的文本框。它并不限定只输入数字。

<input type="tel" name="tel1">

color类型的input元素提供专门用户设置颜色的文本框。通过单击文本框，可以快速打开拾色器面板，方便用户可视化选择一种颜色。

<input type="color" name="color1">

input元素不但新增了输入类型，还新增了几个input属性，用于指定输入类型的行为和限制，这些属性分别是autocomplete、autofocus、form、formoverrides、placeholder、height和width、min和max、step、list、pattern以及required。

新增的autocomplete属性可以帮助用户在input类型的输入框中实现自动完成内容输入。autocomplete属性有3种值：on、off和空值。

新增的autofocus属性可以使得在页面加载时，某表单控件自动获得焦点，它是一个布尔值。这些控件可以是文本框、复选框、单选按钮和普通按钮等所有<input>标签的类型。在同一页面中只能指定一个antofocus属性值。

新增form属性可以把表单内的从属元素写在页面中的任意位置，然后只需要为这个元素指定form属性并设置属性值为该表单的id。

<form action="" method="get"id="form1">

如果一个form属性要引用两个或两个以上的表单，则需要使用空格将表单id分隔开。

<input type="text" name="address1"form="form1 form2 form3" />

新增的form override表单重新属性，用于重写form元素的某些属性设定。表单重写属性并不适用于所有的input输入类型，而是只适用于submit和image输入类型。

formaction:用于重写表单的action属性（实现将表单提交到不同的页面中去）；

formenctype：用于重写表单的enctype属性；
formmethod：用于重写表单的method属性；
formnovalidate：用于重写表单的novalidate属性；
formtarget：用于重写表单的target属性

新增的height和width属性规定用于image类型的input标签的图像高度和宽度，只适用于image类型的input标签。

新增的datalist元素可以实现数据列表的下拉效果，外观类似autocomplete，用户可从列表中选择，也可自行输入，而list属性用于指定输入框所绑定的datalist元素，其值是某个datalist的id。

新增的min、max、step属性用于为包含数字或日期的input输入类型规定限制，适用于date、pickers、number和range标签。

max:规定输入框所允许的最大值

min：规定输入框所允许的最小值

step：规定输入框合法的数字间隔

新增的multiple属性支持一次性选择多个文件，并且该属性同时支持新增的email类型。

选择要上传的多个文件：

<input type="file" name="img"multiple="multiple" />

新增pattern属性用于验证input类型输入框中用户输入的内容是否与自定义的正则表达式相匹配，适用于text、search、url、telephone、email、password等input标签。pattern属性允许用户自定义一个正则表达式，但用户的输入必须符合正则表达式所指定的规则。

新增placeholder属性用于为input类型的输入框提供一种提示（hint），这些提示可以描述输入框期待用户输入何种内容，在输入框为空时显式出现，而当输入框获得焦点时则会消失。

新增required属性用于规定输入框填写的内容不能为空，否则不允许用户提交表单。该属性适用于以下input输入类型：text、search、url、telephone、email、password、date pickers、number、checkbox、radio和file。

HTMl5新增了几个form元素，分别是datalist、keygen和output。

新增的datalist元素用于为输入框提供一个可选的列表，用户可以直接选择列表中的某一预设的项，从而免去输入的麻烦。

新增的keygen元素是密钥对生成器（key-pair generator），能够使用户验证更为可靠。

<keygen name="security"/>