HTML5中input元素的支持类型

目前input元素定义了22种不同的type,它们在不同浏览器中的表现并不一致。本文主要用于在不同设备及浏览器中测试它们的区别。

不同类型的input在不同浏览器中表现的方式有所不同,尤其在移动浏览器中(有些类型会调用不同的键盘类型),下面所有的示例建议在不同的浏览器中测试。

一、文本类型(默认值)-text
这个没有什么好说的,text类型是input的默认类型,当input设置为一个不支持的类型或没有设置类型时,浏览器会将type设置为text

二、电子邮件类型-email
在提交表单时,会验证输入的是否符合电子邮件格式要求,但这个验证比较不准,必要时还需要通过代码进行验证

三、url类型-url
提交表单时会验证是否符合url

四、数字类型-number
只能输入数字,一般浏览器会出现上下三角按钮来控制数值的增减(这个可以通过css控制),也可以直接输入数字。number类型的input支持step属性表示一次增加或减少多少,min为最小值,max为最大值。如果用户手动输入,在输入时是可以突破这些界限的。

五、范围类型-range
在浏览器中多为一个滑杆(类似于调节音量的滑杆),同样支持min、max、step属性。

六、日期类型-date
可以选择年月日。

七、月份类型-month
可以选择年和月。

八、周类型-week
可以选择周和年。

九、时间类型-time
可以选择小时和分钟。

十、日期时间类型-datetime-local
可以选择年月日和时间(本地时间)。

十一、隐藏类型-hidden
不在页面上显示,用于传递一些不需要用户输入的值。

十二、搜索类型-search
这个与普通的text并没有什么区别。

十三、颜色类型-color
用于选取颜色,会调出调色板。

十四、电话类型-tel
用于输入电话号码,一般移动浏览器会自动调用数字键盘。

十五、密码类型-password
用于输入密码,显示为实心圆点或星号等。

十六、复选框-checkbox
可以同时选择多个值,可以通过点击取消。

十七、单选框-radio
只能选择一个值,再次单击也不能取消,只能通过单击相同name的其他radio来取消当前的radio。

十八、文件类型-file
用于选择文件。

十九、表单提交-submit
用于提交表单,与button外观一致。

二十、图片类型-image
在表单中显示图片。

二十一、重置类型-reset
重置表单的所有内容。

二十二、按钮类型-button
一个单纯的按钮,没有默认的事件。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

You must enable javascript to see captcha here!