HTML5新表单

第一部分INPUT新类型，新增了以下类型：

1.email类型 - 判断字符串中是否包含"@"符号，注意的是不能以"@"开始、不能以"@"结束

2.搜索类型 - search

3.URL类型 - 判断字符串中是否包含"http:"，注意的是以"http:"开始,验证通过，以"http:"结束,验证通过

4.电话号码类型 - tel，注意的是只有在手机端浏览器访问时有效果

5.数字类型 - number，需要注意的是允许输入非数字内容,但是不允许提交，在设置min和max时，允许输入范围外的值,不允许提交；这个类型有一些属性： min - 设置数字的最小值；max - 设置数字的最大值；step - 设置步长,每次增加或减小的量值

6.范围类型 - range，效果就是滑动条，属性：min - 最小值、max - 最大值、step - 步长、value - 当前值

7.颜色类型 - color

8.日期类型 - date，日期格式 - yyyy/MM/dd

9周、月份类型 （实际很少使用）

10周 - week（实际很少使用）

11月份 - month（实际很少使用）

第二部分是表单新元素

1.<datalist>元素，用法：需要配合input元素使用，在input元素中定义list属性(值为datalist元素的id值)，好处就是数据与结构的分离

2.<progress>元素，就是实现一个进度条，属性有：max - 设置进度条的最大值、value - 设置进度条当前的值

3. <meter>元素，用法和<progress>元素类似，作用 - 刻度，属性包括：min和max - 设置最小值和最大值、 value - 表示当前值，high和low - 设置预警值（举个常见的例子，当你手机的电量小于10%时候，一般会显示红色的一小段进度）

4.<output>元素，和<input> 输入框正好相反，<output>是输出框，属性：for指定要输出的元素进行关联（实际开发中,很少使用）

第三部分是表单新属性

1.placeholder属性：就是实现input输入框的默认提示信息，相比value属性值更好用。这个在实际开发过程中非常常见

2.autofocus属性：就是自动获取焦点、用法有点不同，它不是key=vlaue的形式，而是直接只定义属性名(没有属性值)

3.multiple属性：就是允许输入框输入多个值，用法和autofocus一样只定义属性名(没有属性值)

4.form属性（实际开发中用到不多）：就是表单元素定义在表单之外，用法 - 值是相关表单的id属性值

第四部分是表单新验证(这是一个难点，也是重点)

1.验证属性：

required属性即：验证是否为空？返回false,表示当前元素值为空， 返回true,表示当前元素值不为空

pattern属性即：验证正则表达式，定义正则表达式时,不能添加"//"， 正则表达式不能验证是否为空

min和max属性即：验证最小值和最大值 ，只和number类型的input元素配置使用

minlength和maxlength属性即：验证最小长度和最大长度，minlength - 验证最小长度，maxlength - 限制最大长度（输入内容的长度不能大于maxlength的值）

validity属性即：HTML5提供表单验证的接口，通过该属性得到validityState对象，该对象提供一系列的有效状态， 有效状态可用于表单验证，得到validatyState对象，elem.validaty - 得到该对象

2.有效状态

valid - 返回Boolean,表示验证是否通过，true - 表示验证通过， false - 表示验证失败，

valueMissing - 表示值是否为空，返回值true - 表示元素值为空(错误)、false - 表示元素值不为空(正确) 注意该状态配合required属性使用

typeMismatch - 表示元素类型是否匹配，返回值true - 表示元素类型不匹配、false - 表示元素类型匹配、 该状态配合email、url、number等使用

patternMismatch - 表示正则表达式是否匹配、返回值true - 表示正则表达式不匹配、false - 表示正则表达式匹配，该状态配合pattern属性使用

tooLong - 表示元素内容长度是否过长，返回值true - 表示元素内容长度过长，false - 表示元素内容长度不长，该状态配合maxlength属性使用

maxlength属性 - 限制属性，tooLong可能不会出现(完整性)

rangeUnderflow - 表示元素值是否小于min值，返回值true - 表示元素值小于min的值，false - 表示元素值不小于min的值 该状态配合min属性使用

stepMismatch - 表示元素值与step值是否不符，返回值true - 表示元素值与step值不符，false - 表示元素值与step值相符 该状态配合step属性使用

customError - 自定义错误，配合setCustomValidity()方法使用，作用就是替换之前的判断表达式，自定义错误提示信息setCustomValidity(自定义错误信息)，一旦调用该方法,默认认为就是错的，上述所有的有效状态返回错误值 验证正确时,调用该方法,将错误信息置为空