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格式校验 | |
tel | 会有tel格式校验 |
url | 会有url格式校验 |
2. input的pattern和required
类型 | 说明 |
---|---|
pattern | 正则校验校验 |
required | 不能为空 |
代码如下:
<input type="text" pattern="^[0-9]{4}$" required="true">
3. readonly和disabled
类型 | 说明 |
---|---|
readonly | 只读 |
disabled | 禁用 |
二者的区别:
样式上不一样,disabled会改样式。
提交时,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 | 提示 |