input框的23种类型

左手的ㄟ右手 2022-05-22 12:17 307阅读 0赞

input框的类型到底有多少种呢？零零总总算起来有23种。

▍总述

常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。

另外还有一些类型：tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。

▍text：文本

代码：

效果：

![70][]

注意：当input没有填写类型时，默认为文本类型。

▍password：密码

代码：

效果：

![70 1][]

▍number：数字

代码：

效果：

![70 2][]

▍button：按钮

代码：

效果：

![70 3][]

▍tel：电话

代码：

效果：

![70 4][]

注意：tel类型似乎没有什么实际作用。

▍email：邮件

代码：

效果：

![70 5][]

注意：火狐对email类型有校验，360浏览器无校验。

▍file：文件

代码：

效果：

![70 6][]

▍range：滑动条

代码：

效果：

![70 7][]

▍date：日期

代码：

效果：

![70 8][]

▍month：月份

代码：

效果：

![70 9][]

▍week：周

代码：

效果：

![70 10][]

▍time：时间

代码：

效果：

![70 11][]

▍datetime：时间、日、月、年（UTC时间）

代码：

效果：

![70 12][]

注意：火狐、360浏览器都对datetime不支持，会按照text类型处理。

▍datetime-local：时间、日、月、年（本地时间）

代码：

效果：

![70 13][]

▍radio：单选框

代码：

效果：

![70 14][]

▍checkbox：复选框

代码：

效果：

![70 15][]

▍image：图片

代码：

效果：

![70 16][]

▍color：颜色

代码：

效果：

![70 17][]

▍search：搜索框

代码：

效果：

![70 18][]

注意：search似乎与text的效果没有什么区别。。。

▍reset：重置按钮

代码：

效果：

![70 19][]

注意：reset按钮一般用于form表单中。

▍submit：提交按钮

代码：

效果：

![70 20][]

注意：submit按钮一般用于form表单中。

▍hidden：隐藏

代码：

效果：

注意：hidden类型会将input隐藏，所以什么都看不到，而且被隐藏的input框也不会占用空间。

▍url：路径

代码：

效果：

![70 21][]

注意：火狐对url类型有校验，360浏览器无校验。

▍写在结尾

总的来说，目前input框也就只有这23种类型，虽然有的类型可能用不上一两次甚至是一次都用不上，但是了解一下还是不错的。

注意：tel类型似乎没有什么实际作用。

![关注微信公众号：爱唱歌的蜗牛先生][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]

[70]: /images/20220522/d0924bc7011b443eb2d83d8d1587aced.png
[70 1]: /images/20220522/8ebcd5c9aa694e0899451186d28c4f0a.png
[70 2]: /images/20220522/5806f61a462c4c41959a6f8b8e81595f.png
[70 3]: /images/20220522/755ec587b0f64e719e4776a4e8098e7f.png
[70 4]: /images/20220522/8e3d479ef9e74a039b10934ff7df2941.png
[70 5]: /images/20220522/61262546e1594982ae3c764edcf11ca9.png
[70 6]: /images/20220522/44df0d4a32e94fd98760b49080ab57ae.png
[70 7]: /images/20220522/2a4a3154c6624f78ab762704f8026e6a.png
[70 8]: /images/20220522/02688a2a3ab7406d9e29b05f94c23f38.png
[70 9]: /images/20220522/f3ec2f325b2c4d35936f8e7e16418cdb.png
[70 10]: /images/20220522/15641960fe3d449dbd7c23ebc898af66.png
[70 11]: /images/20220522/39cc27db2e6b48558a8d74c868135103.png
[70 12]: /images/20220522/ff0c233cb9284667871c8decf53a655d.png
[70 13]: /images/20220522/044296b8fcf64b89935b6381ffcaabb7.png
[70 14]: /images/20220522/f5432a62ba5242bc9010d97541a4b9c7.png
[70 15]: /images/20220522/9c0e4161c5e84a10a5a688b2661f0f78.png
[70 16]: /images/20220522/40b4603e3db04f70b08092262cdc675a.png
[70 17]: /images/20220522/66a4ca727c464171b932844d800cfce1.png
[70 18]: /images/20220522/883327cb654f49c09dbec65cd46cef70.png
[70 19]: /images/20220522/65a62cf9d09e46b0aee7e41dbbde01c1.png
[70 20]: /images/20220522/779ff1e9db424f018a9ba8a62c1b3e42.png
[70 21]: /images/20220522/c69a2e8992f44202851bf855bbff7a2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]: /images/20220522/89f97fc17df0477683dc007062c3a417.png