input新类型
<pre>
email:验证是否包含@
search:搜索框
url: 验证是否包含http
tel: 效果只能在移动端出现
number: 数字选择 min max step
range: 范围类型 min max step value
color: 颜色选择器
date:日期类型
week:星期类型
month:月份类型
</pre>
input新类型中，date是个人最喜欢的新类型生成的日历十分简洁
表单新元素
- datalist
用于定义input的备选框 ，input的list的值要等于datalist的id的值；
使用datalist元素，实现了数据与结构的分离，可重复使用。 - progress
进度条
max - 设置进度条的最大值；
min - 无，默认为0；
value - 当前的进度值。 - meter
刻度
min - 最小值；
max - 最大值；
value -当前值；
low - 低预警值；
hight - 高预警值； - output
使用方法：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
只要修改两个input的值，就能把结果给显示出来
表单新属性 -在input中使用
- placeholder ： 置空字符
- multiple:允许输入多个值
多个值使用逗号隔开，例如多个邮箱；
只定义属性名，没有定义属性值。 - autofocus:自动获取焦点
只定义属性名，没有定义属性值 - form：允许将表单元素定义在表单外
form表单外的表单一定要写form的id
HTML5表单新验证属性 -在input中使用
-
required：验证当前元素之是否为空
对应一个事件，该事件在元素为空时会取消冒泡，会造成onsubmit不执行
-
pattern： 使用正则表达式验证当前元素值是否匹配
不能验证内容是否为null
-
min和max： 验证当前元素值最大值或最小值, 针对数字
一般使用与number/range等元素
-
minlength和maxlength：验证当前元素值的最小长度和最大长度
minlength:并不是html5的新属性
-
validity：表单验证HTML5提供一种有效状态
有效状态通过validityState对象获取到；
validityState对象可通过validity属性得到
HTML5表单新验证状态
验证(有效)状态-用来替换原来的判断逻辑
- validityState对象提供了一系列的有效状态
通过有效状态判断，进行判断
注意：所有验证状态必须配合上诉的验证属性使用
- valueMissing:
判断当前元素值是否为空
配合required属性使用
- typeMismatch
判断当前元素值得类型是否匹配
配合email/number/url等属性使用
- patternMismatch
判断当前元素值是否匹配正则表达式
配合pattern属性使用
- tooLong
判断当前元素值的长度是否正确
配合maxlength属性
- rangeUnderflow
判断当前元素值是否小于min属性值
配合min
- stepMismatch
判断当前元素值是否与step设置相同
配合step属性，并不与min和max属性值比较
- valid
判断当前元素是否正确
返回true - 表示验证成功 ；
返回false - 表示验证失败 。
- customError：
配合setCustomValidity()方法使用 ；
setCustomValidity("设置自定义的错误提示内容") ；
一旦使用该方法修改默认错误提示后，即使输入正确也会有提示
解决办法：
一步步判断验证状态，设置setCustomValidity("提示语")，
最后 if(html.value !=" " && html.value!=null){setCustomValidity(" ")}
剔除setCustomValidity()方法带来的影响 。
