HTML5新增的表单type属性
type |
语言 |
说明 |
email |
邮箱 |
会自动验证邮箱,会默认验证邮箱,要求必须要包含@,服务器名称如果不满足则会阻止当前提交 |
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数据一起提交