目录

一、概述

二、传统类型

三、新增类型

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

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

text

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

password

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

模拟密码显示隐藏

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

file

定义文件上传控件。

radio

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

checkbox

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

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

hidden

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

button

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

image

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

submit

定义表单的提交按钮。

reset

定义表单的重置按钮。

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

color

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

tel

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

email

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

url

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

search

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

number

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

range

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

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

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

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

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