HTML5 5 表单
HTML5 5 表单
1新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型：
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
①浏览器支持
|
Input type |
IE |
Firefox |
Opera |
Chrome |
Safari |
|
|
No |
4.0 |
9.0 |
10.0 |
No |
|
url |
No |
4.0 |
9.0 |
10.0 |
No |
|
number |
No |
No |
9.0 |
7.0 |
No |
|
range |
No |
No |
9.0 |
4.0 |
4.0 |
|
Date pickers |
No |
No |
9.0 |
10.0 |
No |
|
search |
No |
4.0 |
11.0 |
10.0 |
No |
|
color |
No |
No |
11.0 |
No |
No |
注释：Opera对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
②Input 类型 - email
email 类型用于应该包含 e-mail地址的输入域。在提交表单时，会自动验证 email域的值。
<form action="/example/html5/demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>
③Input 类型 - url
url 类型用于应该包含 URL地址的输入域。在提交表单时，会自动验证 url域的值。
<form action="/example/html5/demo_form.asp" method="get">
Homepage: <input type="url" name="user_url" /><br />
<input type="submit" />
</form>
④Input 类型 - number
number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：
<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="number" name="points" min="1" max="10" />
<input type="submit" />
</form>
请使用下面的属性来规定对数字类型的限定：
|
属性 |
值 |
描述 |
|
max |
number |
规定允许的最大值 |
|
min |
number |
规定允许的最小值 |
|
step |
number |
规定合法的数字间隔（如果 step="3"，则合法的数是-3,0,3,6 等） |
|
value |
number |
规定默认值 |
提示：iPhone 中的 Safari 浏览器支持number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。
⑤Input 类型 - range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。您还能够设定对所接受的数字的限定：
<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10" />
<input type="submit" />
</form>
请使用下面的属性来规定对数字类型的限定：
|
属性 |
值 |
描述 |
|
max |
number |
规定允许的最大值 |
|
min |
number |
规定允许的最小值 |
|
step |
number |
规定合法的数字间隔（如果 step="3"，则合法的数是-3,0,3,6 等） |
|
value |
number |
规定默认值 |
⑥Input 类型 - Date Pickers（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC时间）
datetime-local - 选取时间、日、月、年（本地时间）
<form action="/example/html5/demo_form.asp" method="get">
Date: <input type="date" name="user_date" />
<input type="submit" />
</form>
⑦Input 类型 - search
search 类型用于搜索域，比如站点搜索或 Google搜索。
search 域显示为常规的文本域。
⑧Input 类型 - color
color 类型用在input字段主可以从拾色器中选择一个颜色:
<form action="demo-form.php">
选择你喜欢的颜色: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
2 HTML5 的新的表单元素：
HTML5 拥有若干涉及表单的元素和属性，本节介绍以下新的表单元素：
datalist
******
output
①浏览器支持
|
Input type |
IE |
Firefox |
Opera |
Chrome |
Safari |
|
datalist |
No |
No |
9.5 |
No |
No |
|
****** |
No |
No |
10.5 |
3.0 |
No |
|
output |
No |
No |
9.5 |
No |
No |
②datalist 元素
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属性。
③****** 元素
****** 元素的作用是提供一种验证用户的可靠方法。
****** 元素是**对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
实例
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <****** name="security" />
<input type="submit" />
</form>
④output 元素
output 元素用于不同类型的输出，比如计算或脚本输出：
<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 oninput="resCalc()">
<input id="num_a" /> +
<input id="num_b" /> =
<output id="result" ></output>
</form>
output属性
|
属性 |
值 |
描述 |
|
element_id |
定义输出域相关的一个或多个元素。 |
|
|
form_id |
定义输入字段所属的一个或多个表单。 |
|
|
name |
定义对象的唯一名称。（表单提交时使用） |
3 HTML5 的新的表单属性
本章讲解涉及 <form> 和 <input> 元素的新属性。
新的 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
①浏览器支持
|
Input type |
IE |
Firefox |
Opera |
Chrome |
Safari |
|
autocomplete |
8.0 |
3.5 |
9.5 |
3.0 |
4.0 |
|
autofocus |
No |
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 |
No |
No |
No |
3.0 |
3.0 |
|
required |
No |
No |
9.5 |
3.0 |
No |
②autocomplete 属性
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>
注释：在某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。
③autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。
User name: <input type="text" name="user_name" autofocus="autofocus" />
注释：autofocus属性适用于所有 <input>标签的类型。
④form 属性
form 属性规定输入域所属的一个或多个表单。
注释：form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id：
<form action="/example/html5/demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
<p>下面的输入域在 form元素之外，但仍然是表单的一部分。</p>
Last name: <input type="text" name="lname" form="user_form" />
⑤表单重写属性
表单重写属性（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>
⑥height 和 width属性
height 和 width属性规定用于 image类型的 input标签的图像高度和宽度。
注释：height和 width 属性只适用于 image类型的 <input>标签。
<form action="/example/html5/demo_form.asp" method="get">
User name: <input type="text" name="user_name" /><br />
<input type="image" src="/i/eg_submit.jpg" width="99" height="99" />
</form>
⑦list 属性
list 属性规定输入域的 datalist。datalist是输入域的选项列表。
注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range以及 color。
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
⑧min、max和 step属性
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 属性规定输入域中可选择多个值。
Select images: <input type="file" name="img" multiple="multiple" />
注释：multiple 属性适用于以下类型的<input> 标签：email和 file。
Select images: <input type="file" name="img" multiple="multiple" />
⑩novalidate 属性
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>
11 pattern 属性
pattern 属性规定用于验证 input域的模式（pattern即正则表达式）。
注释：pattern 属性适用于以下类型的<input> 标签：text, search, url, telephone, email以及 password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
Country code: <input type="text" name="country_code"pattern="[A-z]{3}" title="Three letter country code" />
12 placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
注1：placeholder属性适用于以下类型的 <input>标签：text, search, url, telephone, email以及 password。
注2：提示（hint）会在输入域为空时显示出现，会在输入域获得值时消失：
实例
<input type="search" name="user_search" placeholder="Search W3School" />
13 required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。
注释：required属性适用于以下类型的 <input>标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio以及 file。
实例
Name: <input type="text" name="usr_name" required="required" />