HTML HTML5 PHP Mysql Linux 缓存技术 工具 资讯 读书 其他

HTML5 输入类型


HTML5 新输入类型

HTML5 表单有一些新的输入类型. 这些新属性使得输入更好控制和校验.

本节包含新的输入类型:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
Note

不是所有的浏览器都支持这些新的输入类型.然而, 你已经可以开始使用它们;如果它们不支持,它们被认为是文本域.



输入类型: 颜色(color)

颜色类型是包含颜色的输入域.

Opera Safari Chrome Firefox Internet Explorer

例子

选择颜色的选择器:

选择你最喜欢的颜色: <input type="color" name="favcolor">

亲自试一试 »


输入类型: 日期(date)

日期类型允许用户选择日期.

Opera Safari Chrome Firefox Internet Explorer

例子

定义一个日期控件:

生日: <input type="date" name="bday">

亲自试一试 »


输入类型: 日期时间(datetime)

日期时间类型允许用户选择日期和时间(带时区).

Opera Safari Chrome Firefox Internet Explorer

例子

定义日期和时间控件(含时区):

生日 (日期和时间): <input type="datetime" name="bdaytime">

亲自试一试 »


输入类型: 本地日期时间类型(datetime-local)

本地日期时间类型允许用户选择日期时间(没有时区).

Opera Safari Chrome Firefox Internet Explorer

例子

定义一个日期和时间控件(没有时区):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

亲自试一试 »


输入类型: email

email类型用于邮件地址的输入域.

Opera Safari Chrome Firefox Internet Explorer

例子

定义e-mail地址输入域 (当提交表单时会自动验证):

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

亲自试一试 »

提示: 苹果浏览器识别邮件类型, 改变屏幕上的键盘来匹配 (添加 @ 和 .com 选项).


输入类型: 年月(month)

年月类型允许用户选择年和月.

Opera Safari Chrome Firefox Internet Explorer

例子

定义一个年和月的控件 (没有时区):

生日 (年和月): <input type="month" name="bdaymonth">

亲自试一试 »


输入类型: 数字类型(number)

数字类型用于包含数字值.

你也可以设置接收数字的范围限制:

Opera Safari Chrome Firefox Internet Explorer

例子

定义一个数字域 (有范围限制):

数量 (1到5): <input type="number" name="quantity" min="1" max="5">

亲自试一试 »

使用以下属性指定限制规则:

  • max - 指定允许输入的最大值
  • min - 指定允许输入的最小值
  • step - 指定的数量增加的间隔
  • value - 指定默认值

试试所有限制的例子: 亲自试一试


输入类型: 范围类型(range)

范围类型用拖动条控制数字的范围.

您还可以设置你要限制数字的范围.

Opera Safari Chrome Firefox Internet Explorer

例子

定义一个控制输入一个精确值不是很重要的数字 (像一个滑块控件):

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

亲自试一试 »

使用以下属性来指定的限制:

  • max - 指定允许的最大值
  • min - 指定允许的最小值
  • step - 指定的合法数量的间隔
  • value - 指定默认值

输入类型: 搜索类型(search)

查找类型用于查找域(搜索领域的行为,就像一个普通的文本域).

Opera Safari Chrome Firefox Internet Explorer

例子

定义了一个搜索域 (像一个网站搜索,或者谷歌搜索):

谷歌搜索: <input type="search" name="googlesearch">

亲自试一试 »


输入类型: 电话类型(tel)

电话类型是用于电话号码的输入域. 

Opera Safari Chrome Firefox Internet Explorer

例子

定义一个字段输入一个电话号码:

电话: <input type="tel" name="usrtel">

亲自试一试 »


输入类型: 时间类型(time)

时间类型允许用户选择时间.

Opera Safari Chrome Firefox Internet Explorer

例子

定义一个控制输入 (没有时区):

选择时间: <input type="time" name="usr_time">

亲自试一试 »


输入类型: url

url类型用户输入URL地址.

url字段的值被自动提交表单时进行验证.

Opera Safari Chrome Firefox Internet Explorer

例子

定义一个字段输入一个URL:

输入你的主页: <input type="url" name="homepage">

亲自试一试 »

提示: 苹果浏览器识别url输入类型, 会改变屏幕上的键盘来匹配 (添加 .com 选项).


输入类型: 周类型(week)

周类型允许用户选择周和年.

Opera Safari Chrome Firefox Internet Explorer

例子

定义年和周的插件 (没有时区):

选择周: <input type="week" name="week_year">

亲自试一试 »




To Top