HTML5 为 input 的 type 类型增加了多种枚举值,用来表达不同的意思,同事具有验证功能,如果格式不对,浏览器将原始提供错误提示,堪称超级牛 X 啊,具体如下:
| Keyword | Data type |
|---|---|
| hidden | 隐藏输入框 |
| text | 单行文本 |
| search | 单行文本 |
| tel | 手机号/座机号 |
| url | 绝对地址 |
| 一个或多个 email 地址 | |
| password | 密码框 |
| datetime | 带有时区的时间 |
| date | 无时区的年月日时间 |
| month | 无时区的年月 |
| week | 无时区的周数 |
| time | 无时区的时间(小时,分钟,秒,毫秒) |
| datetime-local | 无时区的日期与时间 |
| number | 数字值 |
| range | 范围:<input type="range" min=0 max=100 step=20 value=50> |
| color | 8-bit 表示的颜色 |
| checkbox | checkbox |
| radio | radio |
| file | 文件 |
| submit | 提交按钮 |
| image | 图片按钮 |
| reset | 重置表单数据 |
| button | 按钮 |
学习至此,大叔发现 mhtml5 网站上已经有很多现成的资料了,所以如下的一些新元素请大家自行参考该网站的资料学习,大叔将着重继续学习 HTML5 在现有元素上的更新改变。
- figure 元素
- figcaption 元素
- track 元素
- embed 元素
- mark 元素
- progress 元素
- time 元素
- ruby, rt 和 rp 元素
- bdi 元素
- wbr 元素
- canvas 元素
- command 元素
- details 元素
语义化
标记标签 mark 双标签
用电量提示 meter
电量或者内存的使用情况
min:最小值
max:最大值
value:当前值
low:最低预警值
high:最高预警值
*默认的最小值是0,最大值是1
*如果当前浏览器不支持该标签,会显示标签里的内容.
单词内换行标签 wbr 双标签
拼音标注标签 ruby 双标签,
需要和rt,rp标签配合使用,
rt:在rt标签里写上需要标注的信息,
rp:当浏览器不支持时,会显示该标签里的内容.
datalist 双标签,一般结合input标签使用
1.在不同的浏览器下显示的效果有差异.
2.input标签和datalist标签是靠input标签内的list标签属性联系在一起的.
例子:
form>input[type="text" list="city"]+datalist[id="city"]>option