HTML5 输入类型
HTML5 新输入类型
HTML5 表单有一些新的输入类型. 这些新属性使得输入更好控制和校验.
本节包含新的输入类型:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
不是所有的浏览器都支持这些新的输入类型.然而, 你已经可以开始使用它们;如果它们不支持,它们被认为是文本域. |
输入类型: 颜色(color)
颜色类型是包含颜色的输入域.
输入类型: 日期(date)
日期类型允许用户选择日期.
输入类型: 日期时间(datetime)
日期时间类型允许用户选择日期和时间(带时区).
输入类型: 本地日期时间类型(datetime-local)
本地日期时间类型允许用户选择日期时间(没有时区).
输入类型: email
email类型用于邮件地址的输入域.
提示: 苹果浏览器识别邮件类型, 改变屏幕上的键盘来匹配 (添加 @ 和 .com 选项).
输入类型: 年月(month)
年月类型允许用户选择年和月.
输入类型: 数字类型(number)
数字类型用于包含数字值.
你也可以设置接收数字的范围限制:
使用以下属性指定限制规则:
- max - 指定允许输入的最大值
- min - 指定允许输入的最小值
- step - 指定的数量增加的间隔
- value - 指定默认值
试试所有限制的例子: 亲自试一试
输入类型: 范围类型(range)
范围类型用拖动条控制数字的范围.
您还可以设置你要限制数字的范围.
使用以下属性来指定的限制:
- max - 指定允许的最大值
- min - 指定允许的最小值
- step - 指定的合法数量的间隔
- value - 指定默认值
输入类型: 搜索类型(search)
查找类型用于查找域(搜索领域的行为,就像一个普通的文本域).
输入类型: 电话类型(tel)
电话类型是用于电话号码的输入域.
输入类型: 时间类型(time)
时间类型允许用户选择时间.
输入类型: url
url类型用户输入URL地址.
url字段的值被自动提交表单时进行验证.
提示: 苹果浏览器识别url输入类型, 会改变屏幕上的键盘来匹配 (添加 .com 选项).
输入类型: 周类型(week)
周类型允许用户选择周和年.