摘要：

　　

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" />

Range：

　　

用于应该包含一定范围内数字值的输入域。

<label>Range: </label><input type="range" name="points" min="1" max="10" />

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" />

 

附录：