HTML5表单
摘要：
HTML5又增加了许多新的表单输入类型，不在仅仅是文本输入框。它让表单更丰富多彩了，下面是一个表单样表
从图中可以看出，表单样式更加多样，而且支持验证，实现了原本只能通过js才能完成的功能。
浏览器：
Email：
用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值。
<label>E-mail: </label><input type="email" name="user_email" />
Url：
用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值。
<label>Url: </label><input type="url" name="user_url" />
Number：
用于应该包含数值的输入域。
<label>Points: </label><input type="number" name="points" min="1" max="10" />
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | number | 规定默认值 |
Range：
用于应该包含一定范围内数字值的输入域。
<label>Range: </label><input type="range" name="points" min="1" max="10" />
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | number | 规定默认值 |
Date Picker：
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间（小时和分钟）
- datetime - 选取时间、日、月、年（UTC 时间）
- datetime-local - 选取时间、日、月、年（本地时间）
<label>Date: </label><input type="date" name="user_date" />
Search：
用于搜索域，比如站点搜索。
<label>Search: </label><input type="search" name="search" />
Color：
用于颜色选择域。点击时会弹出一个颜色选择框。
<label>Color: </label><input type="color" name="color" />
datalist:
规定输入域的选项列表，列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id。
<label>Webpage: </label><input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
keygen：
提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<label>Encryption: </label><keygen name="security" />
output：
用于不同类型的输出，比如计算或脚本输出
<label>Output</label><output id="result" onforminput="resCalc()">alert(111);</output>
autocomplete属性：
规定 form 或 input 域应该拥有自动完成功能。autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
<form autocomplete="on">
<input type="email" name="email" autocomplete="off" />
</form>
autofocus属性：
规定在页面加载时，域自动地获得焦点。适用于所有 <input> 标签的类型。
<input type="email" name="email" autofocus="autofocus" />
form属性：
规定输入域所属的一个或多个表单。适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id。
<form action="demo_form.asp" method="get" id="user_form">
</form>
<input type="text" name="name" form="user_form" />
form overrides：
允许您重写 form 元素的某些属性设定。
表单重写属性有：
- formaction - 重写表单的 action 属性
- formenctype - 重写表单的 enctype 属性
- formmethod - 重写表单的 method 属性
- formnovalidate - 重写表单的 novalidate 属性
- formtarget - 重写表单的 target 属性
适应于submit 和 image
<form id="user_form">
<input type="email" name="userid" />
<input type="submit" value="Submit" />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<input type="submit" formnovalidate="true" value="Submit without validation" />
</form>
multiple属性：
规定输入域中可选择多个值。适用于email 和 file。
<input type="file" name="img" multiple="multiple" />
novalidate属性：
规定在提交表单时不应该验证 form 或 input 域。适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。
<form novalidate="true">
<input type="email" name="user_email" />
<input type="submit" />
</form>
pattern属性：
规定用于验证 input 域的模式，适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
<input type="text" name="country_code" pattern="[A-z]{3}" />
placeholder属性：
提供一种提示。适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
<input type="text" name="country_code" placeholder="请输入" />
required属性：
规定必须在提交之前填写输入域。适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
<input type="text" name="usr_name" required="required" />
spellcheck属性：
规定是否对元素内容进行拼写检查。可对以下文本进行拼写检查：类型为 text 的 input 元素中的值（非密码），textarea 元素中的值，可编辑元素中的值。
<input type="text" name="usr_name" spellcheck="true" />
附录：
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| autofocus | 10 | No | 10.0 | 3.0 | 4.0 |
| form | No | No | 9.5 | No | No |
| form overrides | No | No | 10.5 | No | No |
| height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| list | No | No | 9.5 | No | No |
| min, max and step | No | No | 9.5 | 3.0 | No |
| multiple | No | 3.5 | No | 3.0 | 4.0 |
| novalidate | No | No | No | No | No |
| pattern | No | No | 9.5 | 3.0 | No |
| placeholder | 10 | No | No | 3.0 | 3.0 |
| required | No | No | 9.5 | 3.0 | No |