input标签总结

1. input标签所有type

1.1 常用

类型	说明
text	文本
password	密码
radio	单选
checkbox	多选
file	文件选择器
button	普通按钮
submit	提交
reset	重置
hidden	传隐藏值
image	图片

1.2 日期时间(html5)

类型	说明
date	定义日期字段（带有 calendar 控件）
datetime	定义日期字段（带有 calendar 和 time 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）

1.3 color(html5)

类型	说明
color	定义拾色器

1.4 number(html5)

类型	说明
number	定义带有 spinner 控件的数字字段

<input type="number" name="points" min="1" max="100" step="2" />

1.5 range(html5)

类型	说明
range	定义带有 slider 控件的数字字段

<input type="range" name="points" min="1" max="10" />

1.6 search(html5)

类型	说明
search	定义用于搜索的文本字段，会有清空按钮

1.7 其他

类型	说明
email	会有email格式校验
tel	会有tel格式校验
url	会有url格式校验

2. input的pattern和required

类型	说明
pattern	正则校验校验
required	不能为空

代码如下：

<input type="text" pattern="^[0-9]{4}$" required="true">

3. readonly和disabled

类型	说明
readonly	只读
disabled	禁用

二者的区别：

1. 样式上不一样，disabled会改样式。

2. 提交时，disable的name，value不会提交；readonly会继续提交。

4. list

指定为文本框提供建议值的datalist元素，其值为datalist元素的id值。代码如下：

<input type="text" list="dl">
<datalist id="dl">
    <option value="1">香蕉</option>
    <option value="2">苹果</option>
    <option value="3">橘子</option>
    <option value="4">西瓜</option>
    <option value="5">草莓</option>
    <option value="6">柚子</option>
</datalist>

和select的区别是，select选择的value是option的value，显示的文本是option的文本。而datalist一般显示option的文本，如果option有value，则显示value。由于datalist只是提供给input建议值，一般不需要value。

5. 其他

类型	说明
maxlength	文本长度
size	文本框宽度
placeholder	提示