HTML5学习第三节 HTML5关于表单的新元素-优快云博客

本文介绍了HTML5中新增的表单元素及属性，如email、url、number等输入类型，以及datalist、keygen、output等元素。还详细讲解了input元素的新属性autofocus、form和formoverrides等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、关于表单中input元素type属性的新值

这些新属性提供了更好的输入控制和验证，主要新值如下：

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

Input type	IE	Firefox	Opera	Chrome	Safari
email	No	No	9.0	No	No
url	No	No	9.0	No	No
number	No	No	9.0	No	No
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	No	No
search	No	No	No	No	No
color	No	No	No	No	No

Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

呵呵，看来大家只能用oprea来测试了。

1.email

E-mail: <input type="email" name="user_email" />

以前你是怎么在前台检查邮箱的合法性？是不是累个半死写一大堆正则来匹配？现在不用我们自己写了，直接上面一个类型轻松搞定，哎，现在我对我们开发人员的前途表示担忧啊，你说这都这么好实现了，来个人就能做，以后咱工资是不是更低了？

2.url 同 email ,就不全部介绍了，它主要就是验证你输入的是否是一个URL，如果不是可以自动给你补全

3.number

number 类型用于应该包含数值的输入域,同时input还有对应的新属性来控制最大值和最小值

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

关于几个属性的解释如下:

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

其中step是增加或者减少幅度

4.range 同 number 不再介绍

5.date

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

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

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

这个例子让你从日历中选择一个日期填入。这个功能就更不用说了，你肯定也有过到处找所有浏览器都兼容的日历控件，现在好了，一个TYPE类型变下就达到目的了。

6.search

search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

由于所有浏览器都还不支持，所以暂时还没看到是什么具体的效果，估计是百度的那种搜索联想。

二、其他元素和属性

datalist
keygen
output
list

1.datalist 和 list

datalist 可以定义输入框内的输入内容列表，具体测试代码如下：

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>

input 中定义了要用哪个数据列表，list="url_list" 其中list属性定义了数据列表的ID，这种效果就是我们常见的搜索联想，做过这种效果的朋友都知道实现这个还是有点麻烦的，需要监测键盘代码，需要做样式，等等，现在简单几句就实现了，不过这个就不好扩展了。如果说策划让你在搜索的最后一条右侧再加个什么文字，弄点其他样式，就不行了。罢了罢了，我们要以辩证的思想来看问题！！！！

2.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

这个类型主要是结果输出的区域,看下测试代码就明白什么意思了

<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>
<form onsubmit="return false">
 <input id="num_a" /> +
 <input id="num_b" /> =
 <output id="result" onforminput="resCalc()"></output>
</form>

注意在oprea下测试！不过这个用一般的JS 结果用个 <span>来存放，这样达到的效果不是一样？

三、表单里的form 和 input 的新属性

新的 form 属性：

novalidate

新的 input 属性：

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

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

1.autofocus

autofocus 属性规定在页面加载时，域自动地获得焦点,测试代码如下：

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

2.form

这个是input元素的属性，指定该input属于哪个表单，测试代码如下：

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

有时候我们会碰到一个页面上有很多个表单，一些输入框input可能要复制到N个表单内，现在就不用了，只要写一个input 然后在form 属性里指定属于哪些表单就可以了。

3.重写表单的属性

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

注意这些属性是属于标签input 同时 type 为 submit 或者是p_w_picpath的，看看测试代码就明白了：

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

这样感觉代码要增加好多，还不如我弄个JS一个$("formId").action="..."简单。

4.height 和 width

这个可以控制input标签的类型为p_w_picpath的宽和高

5.placeholder

给输入框写上默认的提示语，提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。

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

6.required

规定了该输入框必须在提交之前填写内容

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

转载于:https://blog.51cto.com/2629783/487437