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:文本
代码:
- <input type="text" />
效果:
注意:当input没有填写类型时,默认为文本类型。
- <input />
▍password:密码
代码:
- <input type="password" />
效果:
▍number:数字
代码:
- <input type="number" />
效果:
▍button:按钮
代码:
- <input type="button" value="我是按钮" />
效果:
▍tel:电话
代码:
- <input type="tel" />
效果:
注意:tel类型似乎没有什么实际作用。
▍email:邮件
代码:
- <input type="email" />
效果:
注意:火狐对email类型有校验,360浏览器无校验。
▍file:文件
代码:
- <input type="file" />
效果:
▍range:滑动条
代码:
- <input type="range" />
效果:
▍date:日期
代码:
- <input type="date" />
效果:
▍month:月份
代码:
- <input type="month" />
效果:
▍week:周
代码:
- <input type="week" />
效果:
▍time:时间
代码:
- <input type="time" />
效果:
▍datetime:时间、日、月、年(UTC时间)
代码:
- <input type="datetime" />
效果:
注意:火狐、360浏览器都对datetime不支持,会按照text类型处理。
▍datetime-local:时间、日、月、年(本地时间)
代码:
- <input type="datetime-local" />
效果:
▍radio:单选框
代码:
- <input type="radio" name="man" id="man" value="man"/><label for="man">男</label>
- <input type="radio" name="man" id="women" value="woman"/><label for="woman">女</label>
效果:
▍checkbox:复选框
代码:
- <input type="checkbox" name="interest" value="run" id="run" /><label for="run">跑步</label>
- <input type="checkbox" name="interest" value="guitar" id="guitar" /><label for="guitar">吉他</label>
- <input type="checkbox" name="interest" value="yoga" id="yoga" /><label for="yoga">瑜伽</label>
- <input type="checkbox" name="interest" value="read" id="read" /><label for="read">阅读</label>
效果:
▍image:图片
代码:
- <input type="image" src="http://p0.so.qhimgs1.com/bdr/_240_/t01cbdeda95800117ac.jpg" />
效果:
▍color:颜色
代码:
- <input type="color" />
效果:
▍search:搜索框
代码:
- <input type="search" />
效果:
注意:search似乎与text的效果没有什么区别。。。
▍reset:重置按钮
代码:
- <input type="reset" />
效果:
注意:reset按钮一般用于form表单中。
▍submit:提交按钮
代码:
- <input type="submit" />
效果:
注意:submit按钮一般用于form表单中。
▍hidden:隐藏
代码:
- <input type="hidden" />
效果:
注意:hidden类型会将input隐藏,所以什么都看不到,而且被隐藏的input框也不会占用空间。
▍url:路径
代码:
- <input type="tel" />
效果:
注意:火狐对url类型有校验,360浏览器无校验。
转载地址 https://blog.csdn.net/i_dont_know_a/article/details/80790526