目录

一、概述

二、传统类型

三、新增类型

一、概述

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

二、传统类型

传统输入控件有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设置。