input的23种type类型

概述

全部类型

传统类型

新增类型

概述

随着html5的出现，input标签新增了多种类型，用以接收各种类型的用户输入。其中传统输入控件有10种，新增输入控件有13种。

全部类型

text 定义单行文本输入框
password 定义密码输入框
file 定义文件上传控件
radio 定义单选按钮
checkbox 定义复选框
hidden 定义隐藏的输入字段
button 定义按钮
image 定义图像形式的提交按钮
reset 定义重置按钮,重置按钮会清除表单中的所有数据
submit 定义提交按钮,提交按钮会把表单数据发送到服务器
color 定义调色板
tel 定义包含电话号码的输入域
email 定义包含email地址的输入域
url 定义包含URL地址的输入域
search 定义搜索域
number 定义包含数值的输入域
range 定义包含一定范围内数字值的输入域
date 定义选取日、月、年的输入域
month 定义选取月、年的输入域
week 定义选取周、年的输入域
time 定义选取月、年的输入域
datetime 定义选取时间、日月、年的输入域(UTC时间)
datetime-local 定义选取时间、日月、年的输入域(本地时间)

传统类型

传统输入控件有10种，如下所示。

text 定义单行文本输入框
password 定义密码输入框
file 定义文件上传控件
radio 定义单选按钮
checkbox 定义复选框
hidden 定义隐藏的输入字段
button 定义按钮
image 定义图像形式的提交按钮
reset 定义重置按钮,重置按钮会清除表单中的所有数据
submit 定义提交按钮,提交按钮会把表单数据发送到服务器

text

定义单行文本输入框，这是默认的输入类型。

<input type="text">

password

定义密码输入框，输入字符会经过掩码处理，表现为一连串的点。

<input type="password">

模拟密码显示隐藏

现在很多软件在密码框右侧都有一个小眼睛，用于设置密码的显示和隐藏。通过更改input标签的type特性得以实现。

<input id="show" type="password" maxlength="6">
<span id="set">显示密码</span>

<script>set.onclick = function(){if(this.innerHTML == '显示密码'){this.innerHTML = '隐藏密码';show.type="text";}else{this.innerHTML = '显示密码';show.type="password";}}
</script>

file

定义文件上传控件。

radio

定义单选按钮。同一组按钮，name值一定要一致。注意，radio类型的input标签无法设置padding和border样式（ie10及以下版本的浏览器除外）。

checkbox

定义多选按钮。同一组按钮，name值一定要一致。注意，radio类型的input标签无法设置padding和border样式（ie10及以下版本的浏览器除外）。

单选按钮和多选按钮类型的input标签支持checked特性。

hidden

定义隐藏的输入字段，用于在表单中添加对用户不可见，但需要提交的额外数据。注意，disabled特性无法与type特性值为hidden的input标签配合使用。

<!--点击提交按钮后，隐藏域的内容test=12会包含在URL中-->
<form name="form" action="#"><input type="hidden" name="test" value="12"><input type="submit">
</form>

button

定义按钮，没有任何默认行为，常用于用户点击时触发JS脚本。

<input type="button" value="Click me" onclick="alert('1')" />

image

定义图像形式的提交按钮。该类型可以设置width、height、src、alt这四个特性。用图片作为提交按钮会一起发送点击在图片上的x和y坐标，这样可以与服务器端图片地图结合使用。如果图片有name特性，也会随坐标发送。

<form action="#"><input name="test"><input type="image" name="isub" src="http://sa/sub.jpg" width="99" height="99" alt="图片">
</form>

submit

定义表单的提交按钮。

reset

定义表单的重置按钮。

<form action="#" method="get"><input><input type="reset" value="Reset" /><input type="submit" value="Submit" />
</form>

新增类型

新增输入控件有13种，如下所示。

color 定义调色板
tel 定义包含电话号码的输入域
email 定义包含email地址的输入域
url 定义包含URL地址的输入域
search 定义搜索域
number 定义包含数值的输入域
range 定义包含一定范围内数字值的输入域
date 定义选取日、月、年的输入域
month 定义选取月、年的输入域
week 定义选取周、年的输入域
time 定义选取月、年的输入域
datetime 定义选取时间、日月、年的输入域(UTC时间)
datetime-local 定义选取时间、日月、年的输入域(本地时间)

color

创建一个调色板来选择颜色。颜色值以url编码后的十六进制数值提交。如黑色会以%23000000发送，其中%23是#的url编码。safari和ie浏览器不支持该特性。

<input type="color">

tel

定义一个电话输入域。外观上与单行文本框没有差异，在手机端会唤出数字键盘。

<form action="#"><input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}"><input type="submit">
</form>

email

定义一个email地址输入域，会自动验证email域的值，外观上与单行文本框没有差异，在手机端会唤出英文键盘。email类型的input标签支持multiple特性。ie9及以下版本的浏览器以及safari浏览器不支持该类型。

<form action="#" ><input type="email" name="email" multiple><input type="submit">
</form>

url

定义一个url地址输入域，会自动验证url域的值，外观上与单行文本框没有差异。ie9及以下版本的浏览器以及safari浏览器不支持该类型。

<input type="url">

search

定义搜索框，外观上与单行文本框没有差异。

<input type="search">

number

定义数字框，特性值可为小数。在手机端会唤出数字键盘。ie浏览器不支持该类型。与之配合的特性如下所示。

max 　　规定允许的最大值
min 　　规定允许的最小值
step 　规定合法的数字间隔
value 　规定默认值

<input type="number" min="0" max="10" step="0.5" value="6" />

range

定义包含一定范围内数字值的输入域，处理包含在一定范围内的数字输入。ie9及以下版本的浏览器不支持该类型。与之配合的特性如下所示。

max 　　规定允许的最大值
min 　　规定允许的最小值
step 　规定合法的数字间隔
value 　规定默认值

<input type="range" min="0" max="10" step="0.5" value="6" />

如果不设置min和max特性，则默认min=0，max=100。

选取日期和时间的新输入类型

<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">

ie和firefox这6种日期类型都不支持，chrome不支持datetime类型。要预设控件的日期和时间，可以用字符串设置value属性。

date 　　 YYYY-MM-DD
time 　　hh:mm:ss.s
datetime 　　 YYYY-MM-DDThh:mm:ss:sZ
datetime-local YYYY-MM-DDThh:mm:ss:s
month 　　　　 YYYY-MM
week 　　 YYYY-Wnn

YYYY=年
MM=月
DD=日
hh=小时
mm=分钟
ss=秒
s=0.1秒
T=日期与时间之间的分隔符
Z=Zulu时间的时区
Wnn=W周数,从1月的第一周开始是1，直到52

该类型的value特性格式还可以用在min和max的特性里，用来创建时间跨度。step可以用来设置移动的刻度。chrome不支持该类型的step设置。