html5表单

输入类型：

input类型

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值。

 

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

 

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定：

<input type="number" name="points" min="1" max="10" />

 

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

range 类型显示为滑动条。其他与number类型一致。

 

HTML5 拥有多个可供选取日期和时间的新输入类型：

• date - 选取日、月、年
• month - 选取月、年
• week - 选取周和年
• time - 选取时间（小时和分钟）
• datetime - 选取时间、日、月、年（UTC 时间）
• datetime-local - 选取时间、日、月、年（本地时间）

Date: <input type="date" name="user_date" />

 

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

 

HTML5 的新的表单元素：

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

Webpage: <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>

option 元素永远都要设置 value 属性。

 

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

 

output 元素用于不同类型的输出，比如计算或脚本输出：

<output id="result" onforminput="resCalc()"></output>

 

以上新增加的表单元素浏览器支持率比较低，而且目前没什么用处。

 

表单属性：

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

注释：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

minChars: 0, 　　　　　　　　  //至少输入的字符数，default：1；如果设为0，在输入框内双击或者删除内容时显示列表。 

　　width: 220,　　　　　　　　　  //下拉框的宽度，default：input元素的宽度

　　max: 10, 　　　　　　　　　　 //下拉项目的个数，default：10

　　scrollHeight: 300,　　　　　　 // 下拉框的高度， Default: 180

　　scroll: true,　　　　　　　　    //当结果集大于默认高度时，是否使用滚动条，Default: true

　　multiple: false, 　　　　　　　 //是否允许输入多个值. Default: false

　　autoFill: false,　　　　　　　   // 是否自动填充. Default: false

　　multipleSeparator: " ",　　    //输入多个字符时,用来分开各个的字符. Default: ","

　　matchCase:false,　　　　     //是否开启大小写敏感

　　selectFirst:true,    　　　　　  // 如果设置成true,下拉列表的第一个值将被自动选择, Default: true

　　matchSubset:true,    　　　   //是否启用缓存

　　cacheLength: 10,    　　    　　 //缓存的长度.即缓存多少条记录.设成1为不缓存.Default: 10

　　delay: 20,    　　　　　　　　 //击键后的延迟时间(单位毫秒).Default: 远程为400 本地10

　　mustMatch:false,    　　    　   //如果设置为true,只会允许匹配的结果出现在输入框,当用户输入的是非法字符时,将被清除， Default: false

　　matchContains:true,    　　 //决定比较时是否要在字符串内部查看匹配.Default: false

　　formatItem: function(row, i, max) { }

　　　　//结果中的每一行都会调用这个函数,返回值将用LI元素包含,显示在下拉列表中. 三个参数(row, i, max): 返回的结果数组, 当前处理的行数(从1开始), 当前结果数组元素的个数. Default: none, 表示不指定自定义的处理函数.

　　formatResult : function(row, i, max) { }

　　　　//和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.

　　formatMatch: function(row) { }

　　　　//对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row

　　result (function(event, data, formatted){}) //此事件会在用户选中某一项后触发，参数为：event: 事件对象, data: 选中的数据行,formatted:formatResult函数返回的值;

　　　　例如： $("#d").result(function(event, data, formatted){alert(formatted);})

　　extraParams (Object):

　　　　//为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}

 

autofocus 属性规定在页面加载时，域自动地获得焦点。

注释：autofocus 属性适用于所有 <input> 标签的类型。

User name: <input type="text" name="user_name"  autofocus="autofocus" />

 

form 属性规定输入域所属的一个或多个表单。

注释：form 属性适用于所有 <input> 标签的类型。

form 属性必须引用所属表单的 id：

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

在form表单外面的input，可以通过引用form表单的id来实现引用，这样input也算是表单一部分。

注释：如需引用一个以上的表单，请使用空格分隔的列表。

 

表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。

表单重写属性有：

• formaction - 重写表单的 action 属性
• formenctype - 重写表单的 enctype 属性
• formmethod - 重写表单的 method 属性
• formnovalidate - 重写表单的 novalidate 属性
• formtarget - 重写表单的 target 属性

注释：表单重写属性适用于以下类型的 <input> 标签：submit 和 image。

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

注释：这些属性对于创建不同的提交按钮很有帮助。

 

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。

 

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

max 属性规定输入域所允许的最大值。

min 属性规定输入域所允许的最小值。

step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。

注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：

Points: <input type="number" name="points" min="0" max="10" step="3" />

 

multiple 属性规定输入域中可选择多个值。

注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。

Select images: <input type="file" name="img" multiple="multiple" />

 

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

注释：novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.

<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

 

pattern 属性规定用于验证 input 域的模式（pattern）。

模式（pattern） 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。

注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

<form action="/example/html5/demo_form.asp" method="get">
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
<input type="submit" />

 

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

<input type="search" name="user_search"  placeholder="Search W3School" />

 

required 属性规定必须在提交之前填写输入域（不能为空）。

注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: <input type="text" name="usr_name" required="required" />