HTML5表单新增属性
2020-04-21 本文已影响0人
八月飞花
HTML5新增的表单type属性
| type | 语言 | 说明 |
|---|---|---|
| 邮箱 | 会自动验证邮箱，会默认验证邮箱，要求必须要包含@，服务器名称如果不满足则会阻止当前提交 | |
| tel | 电话 | 但是可以提交，并没有验证电话号码，目的是在移动端打开“数字键盘” |
| url | 网址 | 会验证网址的格式，必须包含http:// |
| number | 数量 | 表单会有一个上下箭头，而且只能输入数字 |
| search | 搜索框 | 输入完值之后，有一个删除的按钮，可以清除全部的输入内容 |
| range | 范围 | 可以设置最大值和最小值，max,min 会生成一个滑动条，比如调节音量可以使用这个 |
| color | 颜色 | 拾取一个颜色 |
| date | 日期 | 一个日期，年月日，会展示一个日历控件 |
| datetime | 日期时间 | 这个控件只有苹果的safari浏览器支持，其他浏览器不支持 |
| datatime-local | 日期时间 | 会展示 年月日时分秒 |
| time | 时间 | 一个时间.时分秒 |
| month | 月份 | 显示年月 |
| week | 星期 | 显示哪一年，哪一周 |
| file | 文件 | 文件上传 |
H5表单新增属性
placehoder
提示内容
autofocus
自动获取焦点
autocomplete
设置自动提升功能
这个属性需要设置on（提示开）或off（关）
而且这个属性值必须是提交过的值
而且这个值必须有name属性
required
必须输入，如果没有输入，则会阻止当前提交
pattern
正则表达式验证
比如 <input type="tel" pattern="^(\+86)? 1\d{10}" />
正则表达式验证
* 任意个数，
？ 0或1个
+ 一个或多个
文件上传的表单属性
multiple
选择多个文件
也可以用在邮箱上面，可以传输多个邮箱
填写的时候用，分隔离
input的form
如果有一个input不在form中，
添加这个属性，并且传入表单id，在表单提交时，也会将这个input数据一起提交
