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 plaincopy

<input type="text" />

效果：

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

[html] view plaincopy

<input />

▍password：密码

代码：

[html] view plaincopy

<input type="password" />

效果：

▍number：数字

代码：

[html] view plaincopy

<input type="number" />

效果：

▍button：按钮

代码：

[html] view plaincopy

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

效果：

▍tel：电话

代码：

[html] view plaincopy

<input type="tel" />

效果：

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

▍email：邮件

代码：

[html] view plaincopy

<input type="email" />

效果：

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

▍file：文件

代码：

[html] view plaincopy

<input type="file" />

效果：

▍range：滑动条

代码：

[html] view plaincopy

<input type="range" />

效果：

▍date：日期

代码：

[html] view plaincopy

<input type="date" />

效果：

▍month：月份

代码：

[html] view plaincopy

<input type="month" />

效果：

▍week：周

代码：

[html] view plaincopy

<input type="week" />

效果：

▍time：时间

代码：

[html] view plaincopy

<input type="time" />

效果：

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

代码：

[html] view plaincopy

<input type="datetime" />

效果：

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

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

代码：

[html] view plaincopy

<input type="datetime-local" />

效果：

▍radio：单选框

代码：

[html] view plaincopy

<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：复选框

代码：

[html] view plaincopy

<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：图片

代码：

[html] view plaincopy

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

效果：

▍color：颜色

代码：

[html] view plaincopy

<input type="color" />

效果：

▍search：搜索框

代码：

[html] view plaincopy

<input type="search" />

效果：

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

▍reset：重置按钮

代码：

[html] view plaincopy

<input type="reset" />

效果：

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

▍submit：提交按钮

代码：

[html] view plaincopy

<input type="submit" />

效果：

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

▍hidden：隐藏

代码：

[html] view plaincopy

<input type="hidden" />

效果：

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

▍url：路径

代码：

[html] view plaincopy

<input type="tel" />

效果：

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

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

input框的23种类型相关推荐

HTML表单input类型有哪些,HTML表单之input元素的23种type类型
摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型随着HTML5的出现,input元素新增 ...
input元素的23种type类型
随着HTML5的出现,input元素新增了多种类型,用以接受各种类型的用户输入.其中,button.checkbox.file.hidden.image.password.radio.reset.su ...
在php中type有几种属性,HTML表单之input元素的23种type类型
input元素中有多种类型(type)值,用以接受各种类型的用户输入.其中,button.checkbox.file.hidden.image.password.radio.reset.submit. ...
vue,原生html—input框输入银行卡4位分开、手机号344分隔
vue,原生html-input框输入银行卡4位分开.手机号344分隔效果图: 1.uni-app写input框 (注意type类型不能为number,这是一个坑,我理解到-数字框只能输入数字不能显 ...
input的23种type类型
目录概述全部类型传统类型新增类型概述随着html5的出现,input标签新增了多种类型,用以接收各种类型的用户输入.其中传统输入控件有10种,新增输入控件有13种. 全部类型 text 定 ...
征服number类型的input框
在移动端H5页面开发中,有时候会有一些数值输入方面的需求.如果需要让用户比较方便地输入小数.负数,最简单的方式是使用number类型的input框,输入时软键盘会切换为数字键盘方便输入(ios是带数字 ...
easyui下拉框option写死_JavaScript_jQuery+easyui中的combobox实现下拉框特效，1.第一种写法：Input框中显示： - phpStudy...
jQuery+easyui中的combobox实现下拉框特效 1.第一种写法:Input框中显示: 2. 第二种用法,在list列表中显示: 类别 3. 第二种的另一种写法: 类别以上3种方法均可实 ...
HTML -- 使input文本框不可编辑的2种方法（有disabled属性的input框，后台获取不到值）
1. 使input文本框不可编辑的2种方法今天在写JSP的时候我写了这样的代码 updateBook.jsp <form action="${pageContext.request. ...
自定义 cube-ui 弹出框dialog支持多个且多种类型的input框
start 最近遇到一个需求,给一个移动端项目加一点小功能. 移动端 UI 组件库使用的是 cube-ui. 但是基础的 cube-ui 不太满足我的需求- 重点是记录一下我的思路,其次才是实现的代码 ...
python中input函数的返回是哪种类型_Python3.x中input的变化：input函数默认返回字符串类型...
背景:学习<Python基础教程第2版>,第10.3章标准库:一些最爱时, 运行如下例子: 用户选择投掷的骰子数以及每个骰子具有的面数,随机返回骰子的点数,代码如下: from ran ...

input框的23种类型

input框的23种类型

input框的23种类型相关推荐

最新文章

热门文章