HTML5新增表单标签和属性
2014-01-08 14:01
661 查看
HTML5拥有若干涉及表单的新标签和属性。
一. 新增标签
1. datalist标签
datalist标签规定输入域的选项列表，列表是通过datalist内的option元素创建的。如需把datalist绑定到输入域，用输入域的list属性引用datalist的id，如下面的实例：
网址是：<input type="url" list="user_list" name="link" />
<datalist id="user_list">
<option label="新浪网" value="http://www.sina.com.cn" />
<option label="搜狐网" value="http://www.sohu.com" />
<option label="网易" value="http://www.163.com" />
</datalist>
提示：option元素永远都要设置value属性值。
2. keygen标签
keygen标签的作用是提供一种验证用户的可靠方法。keygen标签是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个是公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。如：
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
3. output标签
output标签用于不同类型的输出，比如计算或脚本输出，如：
<html>
<head>
<script type="text/javascript">
function resCalc()
{
numA=document.getElementById("num_a").value;
numB=document.getElementById("num_b").value;
document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>
</head>
<body>
<p>使用output 元素的简易计算器：</p>
<form onsubmit="return false">
<input id="num_a" /> +
<input id="num_b" /> =
<output id="result" onforminput="resCalc()"></output>
</form>
</body>
</html>
二. 新增属性
HTML5新的form 属性：autocomplete、novalidate；新的input 属性：autocomplete、autofocus、form、form overrides (formaction, formenctype,formmethod, formnovalidate, formtarget)、height、width、list、min、max、step、multiple、pattern (regexp)、placeholder和required。
1. autocomplete属性
autocomplete属性规定form 或input 域是否应该拥有自动完成功能，适用于<form>标签，以及text,、search、url、telephone、email、password、datepickers、range和color类型的<input> 标签。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项，如：
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/HTML 5/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>
<p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>
<p>请注意，表单的自动完成功能是打开的，而e-mail 域是关闭的。</p>
</body>
</html>
2. autofocus属性
autofocus属性规定在页面加载时，域自动地获得焦点，autofocus属性适用于所有<input>标签的类型。如：
User name: <input type="text" name="user_name" autofocus="autofocus" />
3. form属性
form属性规定输入域所属的一个或多个表单，适用于所有<input> 标签的类型，必须引用所属表单的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" />
4. form override attributes
允许重写form元素的某些属性设定，表单重写属性有：
formaction：重写表单的action 属性
formenctype：重写表单的enctype 属性
formmethod：重写表单的method 属性
formnovalidate：重写表单的novalidate 属性
formtarget：重写表单的target 属性
表单重写属性适用于submit和image类型的<input> 标签。如：
<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>
这些属性对于创建不同的提交按钮很有帮助。
5. height和width属性
height和width属性规定用于image类型的input标签的图像高度和宽度，height和width属性只适用于image类型的<input> 标签。如：
<input type="image" src="img_submit.gif" width="99" height="99" />
6. list属性
list属性规定输入域的datalist，datalist是输入域的选项列表。list属性适用于text、search、url、telephone、email、date pickers、number、range和color类型的<input> 标签。
7. min、max和step属性
min、max和step属性用于为包含数字或日期的input 类型规定限定（约束）。max属性规定输入域所允许的最大值，min属性规定输入域所允许的最小值，step属性为输入域规定合法的数字间隔。min、max和step属性适用于date pickers、number和range类型的<input>标签。
8. multiple属性
multiple属性规定输入域中可选择多个值，multiple 属性适用于emial和file类型的<input> 标签。
Select images: <input type="file" name="img" multiple="multiple" />
9. novalidate属性
novalidate属性规定在提交表单时不应该验证form或input域，novalidate属性适用于<form>以及text、search、url、telephone、email、password、date pickers、range和color类型的<input> 标签。如：
<form action="demo_form.asp" method="get" novalidate="true">
10. pattern属性
pattern属性规定用于验证input域的模式（pattern），模式（pattern）是正则表达式。pattern属性适用于text、search、url、telephone、email以及password类型的<input> 标签。下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
11. placeholder属性
placeholder属性提供一种提示（hint），描述输入域所期待的值。placeholder属性适用于text、search、url、telephone、email以及password类型的<input> 标签。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失，例如：
<input type="search" name="user_search"placeholder="Search W3School" />
12. required属性
required属性规定必须在提交之前填写输入域（不能为空）。required属性适用于text、search、url、telephone、email、password、date pickers、number、checkbox、radio以及file类型的<input>标签，如：
Name: <input type="text" name="usr_name" required="required" />
一. 新增标签
1. datalist标签
datalist标签规定输入域的选项列表，列表是通过datalist内的option元素创建的。如需把datalist绑定到输入域，用输入域的list属性引用datalist的id，如下面的实例：
网址是：<input type="url" list="user_list" name="link" />
<datalist id="user_list">
<option label="新浪网" value="http://www.sina.com.cn" />
<option label="搜狐网" value="http://www.sohu.com" />
<option label="网易" value="http://www.163.com" />
</datalist>
提示：option元素永远都要设置value属性值。
2. keygen标签
keygen标签的作用是提供一种验证用户的可靠方法。keygen标签是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个是公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。如：
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
3. output标签
output标签用于不同类型的输出，比如计算或脚本输出，如：
<html>
<head>
<script type="text/javascript">
function resCalc()
{
numA=document.getElementById("num_a").value;
numB=document.getElementById("num_b").value;
document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>
</head>
<body>
<p>使用output 元素的简易计算器：</p>
<form onsubmit="return false">
<input id="num_a" /> +
<input id="num_b" /> =
<output id="result" onforminput="resCalc()"></output>
</form>
</body>
</html>
二. 新增属性
HTML5新的form 属性：autocomplete、novalidate；新的input 属性：autocomplete、autofocus、form、form overrides (formaction, formenctype,formmethod, formnovalidate, formtarget)、height、width、list、min、max、step、multiple、pattern (regexp)、placeholder和required。
1. autocomplete属性
autocomplete属性规定form 或input 域是否应该拥有自动完成功能，适用于<form>标签，以及text,、search、url、telephone、email、password、datepickers、range和color类型的<input> 标签。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项，如：
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/HTML 5/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>
<p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>
<p>请注意，表单的自动完成功能是打开的，而e-mail 域是关闭的。</p>
</body>
</html>
2. autofocus属性
autofocus属性规定在页面加载时，域自动地获得焦点，autofocus属性适用于所有<input>标签的类型。如：
User name: <input type="text" name="user_name" autofocus="autofocus" />
3. form属性
form属性规定输入域所属的一个或多个表单，适用于所有<input> 标签的类型，必须引用所属表单的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" />
4. form override attributes
允许重写form元素的某些属性设定，表单重写属性有：
formaction：重写表单的action 属性
formenctype：重写表单的enctype 属性
formmethod：重写表单的method 属性
formnovalidate：重写表单的novalidate 属性
formtarget：重写表单的target 属性
表单重写属性适用于submit和image类型的<input> 标签。如：
<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>
这些属性对于创建不同的提交按钮很有帮助。
5. height和width属性
height和width属性规定用于image类型的input标签的图像高度和宽度，height和width属性只适用于image类型的<input> 标签。如：
<input type="image" src="img_submit.gif" width="99" height="99" />
6. list属性
list属性规定输入域的datalist，datalist是输入域的选项列表。list属性适用于text、search、url、telephone、email、date pickers、number、range和color类型的<input> 标签。
7. min、max和step属性
min、max和step属性用于为包含数字或日期的input 类型规定限定（约束）。max属性规定输入域所允许的最大值，min属性规定输入域所允许的最小值，step属性为输入域规定合法的数字间隔。min、max和step属性适用于date pickers、number和range类型的<input>标签。
8. multiple属性
multiple属性规定输入域中可选择多个值，multiple 属性适用于emial和file类型的<input> 标签。
Select images: <input type="file" name="img" multiple="multiple" />
9. novalidate属性
novalidate属性规定在提交表单时不应该验证form或input域，novalidate属性适用于<form>以及text、search、url、telephone、email、password、date pickers、range和color类型的<input> 标签。如：
<form action="demo_form.asp" method="get" novalidate="true">
10. pattern属性
pattern属性规定用于验证input域的模式（pattern），模式（pattern）是正则表达式。pattern属性适用于text、search、url、telephone、email以及password类型的<input> 标签。下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
11. placeholder属性
placeholder属性提供一种提示（hint），描述输入域所期待的值。placeholder属性适用于text、search、url、telephone、email以及password类型的<input> 标签。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失，例如：
<input type="search" name="user_search"placeholder="Search W3School" />
12. required属性
required属性规定必须在提交之前填写输入域（不能为空）。required属性适用于text、search、url、telephone、email、password、date pickers、number、checkbox、radio以及file类型的<input>标签，如：
Name: <input type="text" name="usr_name" required="required" />
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5总结系列（二）--新增表单标签及表单属性
- HTML5新增标签、表单新增类型与属性
- html5新增的语义标签和表单验证功能
- html5中新增两个表单属性，分别autocomplete和novalidate属性
- HTML5新增表单元素及属性总结
- [置顶] HTML5新增标签及CSS3新增属性
- HTML5探索一（那些新增的标签和属性）
- 疯狂的表单-html5新增表单元素和属性
- HTML5 学习笔记4-表单新增的元素和属性
- 1.html5语义化标签及表单新增控件和特性
- HTML5-表单相关新增元素和属性
- HTML5 新增表单属性
- HTML5表单新增元素与属性
- HTML5新增标签及属性
- html5表单新增元素与属性2
- html5 新增表单属性
- HTML5表单新增属性
- HTML5新增的标签及属性
- HTML5表单相关新增元素和属性
- html5表单新增的元素与属性