快捷搜索:

HTML5 新的 Input 类型

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特点供给了更好的输入节制和验证。

本章周全先容这些新的输入类型:

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

浏览器支持

Input type

IE

Firefox

Opera

Chrome

Safari

email

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 域的值。

实例

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

亲身试一试

提示:iPhone 中的 Safari 浏览器支持 email 输入类型,并经由过程改变触摸屏键盘来共同它(添加 @ 和 .com 选项)。

Input 类型 - url

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

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

实例

Homepage: type="url" name="user_url" />

亲身试一试

提示:iPhone 中的 Safari 浏览器支持 url 输入类型,并经由过程改变触摸屏键盘来共同它(添加 .com 选项)。

Input 类型 - number

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

您还能够设定对所吸收的数字的限制:

实例

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

亲身试一试

请应用下面的属性来规定对数字类型的限制:

属性

描述

max

number

规定容许的最大年夜值

min

number

规定容许的最小值

step

number

规定合法的数字距离(假如 step="3",则合法的数是 -3,0,3,6 等)

value

number

规定默认值

请试一下带有所有限制属性的例子:亲身试一试

提示:iPhone 中的 Safari 浏览器支持 number 输入类型,并经由过程改变触摸屏键盘来共同它(显示数字)。

Input 类型 - range

range 类型用于应该包孕必然范围内数字值的输入域。

range 类型显示为滑动条。

您还能够设定对所吸收的数字的限制:

实例

type="range" name="points" min="1" max="10" />

亲身试一试

请应用下面的属性来规定对数字类型的限制:

属性

描述

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 - 拔取光阴、日、月、年(本地光阴)

下面的例子容许您从日历中拔取一个日期:

实例

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

亲身试一试

输入类型 "month": 亲身试一试

输入类型 "week": 亲身试一试

输入类型 "time": 亲身试一试

输入类型 "datetime": 亲身试一试

输入类型 "datetime-local": 亲身试一试

Input 类型 - search

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

search 域显示为老例的文本域。

您可能还会对下面的文章感兴趣: