color
|
让 <input../>元素生成一个颜色选择器. 当用户在选择颜色选择器中选中指定颜色后,该文本框自动显示用户选中的颜色,该文本框的 value 为该颜色的值, 形如 #xxxxxx 的颜色值.
|
date
|
让<input../>元素生成一个日期选择器.
|
time
|
让<input../>元素生成一个事件选择器.
|
datetime
|
让<input../>元素生成一个 UTC 日期,时间选择器.
|
datatime-local
|
让<input../>元素生成一个本地日期,时间选择器.
|
week
|
让<input../>元素生成一个供用户选择第几周的文本框.
|
month
|
让<input../>元素生成一个月份选择器.
|
email
|
让<input../>元素生成一个 E-mail 输入框.
浏览器会自动检查该文本框的 value , 如果用户在该文本框内输入的内容不符合 E-mail 格式,
浏览器将会不允许提交表单, 并自动生成提示. 当指定 type= “email”时, <input../>元素可指定如下属性:
multiple : 该属性的值可以是 multiple 或省略属性值. 如果指定了该属性值, 则表明该文本框内允许输入多个 E-mail 地址.
|
tel
|
让<input../>元素生成一个只能输入电话号码的文本框, 但这种类型的文本框并没有提供额外的要求,
也就是用户完全可以向 type= “tel” 的文本框内输入任意文字串.浏览器不会作太多额外的检查.
|
url
|
让<input../>元素生成一个 URL 输入框.浏览器会自动检查该文本框的 value ,
如果用户在该文本框内输入的内容不符合 URL 格式, 浏览器将会不允许提交表单,并自动生成提示.
|
number
|
让<input../>元素生成一个只能输入数字的文本框.
|
range
|
让<input../>元素生成一个拖动条,通过拖动条使得用户只能输入指定范围内,指定步长的值.
当文本框的 type= “range”时, 该文本框内还可以指定如下三个属性:
(1). min : 指定该拖动条的最小值.
(2). max : 指定该拖动条的最大值.
(3). step : 指定该拖动条的步长.
|
search
|
让<input../>元素生成一个专门用于输入搜索关键字的文本框.这种类型的文本框与 type = “text” 的文本框没有太大区别.
|
颜色选择器
对于所有与日期相关的文本框,浏览器都会自动生成一个日期选择器或时间选择器, 当用户单击 type= “datetime” 的文本框时,会看到如下:
对于 type= “month” , type = “week” 的 <input../>元素, 浏览器同样会生成一个日期选择框供用户选择, 只是用户选择是加你工会显示一个月份或第几周.
对于 type = “email” 的文本框, 如果用户输入的字符串不符合 E-mail 规则, 当用户单击提交该表单时, 浏览器将会阻止提交该表单,并自动生成提示信息.
对于 type = “range” 的文本框, 浏览器会自动生成一个拖动条, 允许用户通过拖动该拖动条来输入数值.