input框的23种类型

input框的23种类型

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：文本

代码：

[html]  view plain  copy

1. <input type="text" />  

效果：

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

[html]  view plain  copy

1. <input />  

▍password：密码

代码：

[html]  view plain  copy

1. <input type="password" />  

效果：

▍number：数字

代码：

[html]  view plain  copy

1. <input type="number" />  

效果：

▍button：按钮

代码：

[html]  view plain  copy

1. <input type="button" value="我是按钮" />  

效果：

▍tel：电话

代码：

[html]  view plain  copy

1. <input type="tel" />  

效果：

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

▍email：邮件

代码：

[html]  view plain  copy

1. <input type="email" />  

效果：

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

▍file：文件

代码：

[html]  view plain  copy

1. <input type="file" />  

效果：

▍range：滑动条

代码：

[html]  view plain  copy

1. <input type="range" />  

效果：

▍date：日期

代码：

[html]  view plain  copy

1. <input type="date" />  

效果：

▍month：月份

代码：

[html]  view plain  copy

1. <input type="month" />  

效果：

▍week：周

代码：

[html]  view plain  copy

1. <input type="week" />  

效果：

▍time：时间

代码：

[html]  view plain  copy

1. <input type="time" />  

效果：

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

代码：

[html]  view plain  copy

1. <input type="datetime" />  

效果：

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

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

代码：

[html]  view plain  copy

1. <input type="datetime-local" />  

效果：

▍radio：单选框

代码：

[html]  view plain  copy

1. <input type="radio" name="man" id="man" value="man"/><label for="man">男</label>  
2. <input type="radio" name="man" id="women" value="woman"/><label for="woman">女</label>  

效果：

▍checkbox：复选框

代码：

[html]  view plain  copy

1. <input type="checkbox" name="interest" value="run" id="run" /><label for="run">跑步</label>  
2. <input type="checkbox" name="interest" value="guitar" id="guitar" /><label for="guitar">吉他</label>  
3. <input type="checkbox" name="interest" value="yoga" id="yoga" /><label for="yoga">瑜伽</label>  
4. <input type="checkbox" name="interest" value="read" id="read" /><label for="read">阅读</label>  

效果：

▍image：图片

代码：

[html]  view plain  copy

1. <input type="image" src="http://p0.so.qhimgs1.com/bdr/_240_/t01cbdeda95800117ac.jpg" />  

效果：

▍color：颜色

代码：

[html]  view plain  copy

1. <input type="color" />  

效果：

▍search：搜索框

代码：

[html]  view plain  copy

1. <input type="search" />  

效果：

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

▍reset：重置按钮

代码：

[html]  view plain  copy

1. <input type="reset" />  

效果：

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

▍submit：提交按钮

代码：

[html]  view plain  copy

1. <input type="submit" />  

效果：

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

▍hidden：隐藏

代码：

[html]  view plain  copy

1. <input type="hidden" />  

效果：

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

▍url：路径

代码：

[html]  view plain  copy

1. <input type="tel" />  

效果：

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

转载地址  https://blog.csdn.net/i_dont_know_a/article/details/80790526