html5(新增input类型新增表单元素&新增表单属性&HTML5自带表单验证)

1、新增input类型
-电子邮件类型
语法：
当输入的邮件地址格式不对时，会弹出提示信息

-搜索类型
语法：
手机键盘会将确定变换为搜索

-URL类型
语法：
当输入的网址格式不正确时，会弹出提示信息

-电话号码类型
语法：
主要针对移动端，针对电话号码的输入，调整手机键盘的类型

-数字类型
语法：
只接受数字类型，当文本框中包含非数字时，会弹出错误提示
属性：
min：文本框能接受的最小值
max：文本框能接受的最大值
step：指点击右侧按钮时递增/递减的幅度，取值为整数，默认是1

-范围类型
语法：
会出现一个允许滑动的块
属性：
min：起始值
max：最大值
value：当前元素的值
step：递增或递减的长度

-颜色类型
语法：
可以通过onchange事件，获取选择的颜色值

-日期类型
语法：
-周类型
语法：

-其他
type=month
type=time

一、新增表单元素
1、datalist元素
可以使用该标记创建一组列表项，可以为输入框做提示
该元素需要与input进行绑定，需要有选项option
语法：

2、progress元素
进度条，消失处理的进度值
语法：
属性：value：当前进度
      max：最大进度值

3、meter
类似于进度条

4、output元素(选修)
用于显示表单元素处理的结果值

二、新增表单属性
1、multiple属性：规定文本框中可以包含多个值（email、file）
-多个值之间用逗号隔开
-该属性可以不设置属性值

2、autofocus
自动获取焦点，可以不设置属性值
注意，一个表单中，只会设置一个文本框自动获取焦点

3、form属性
该属性可以用于将某控件与表单关联起来

    
    


    

        
        

        
        

        
        
        

        

        
        

        0.25
        


        

        
        

        
        

        

        

    
    

表单验证
1、required
必填属性，该属性不需要设置属性值

2、pattern
实现元素的指定格式的验证，多用于正则表达式指定的规则
语法格式：
手机号验证：^1[34578]\d{9}$
邮箱验证：^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$

3、min和max
最大值和最小值，适用于number

4、minlength和maxlength
最小字符个数或最大字符个数
当输入字符个数小于minlength时，会弹出提示信息，需要注意的是，设置了maxlength，文本框不允许多输入，也不会有提示

5、validity
这是表单元素的一个属性，可以用于表单验证，该属性主要利用validityState对象，描述元素的有效状态；validityState对象，代表元素是否通过验证，它提供了一些属性，可以用于描述指定元素的验证状态。

语法：表单元素dom对象.validity.属性

验证状态：
1）valid
语法：form表单元素对象.validity.valid;
valid属性是一个bool值，它表示表单元素是否通过验证，如果通过，则为true，否则为false

2）valueMissing
当控制处于无效状态时，此时控件不会验证通过，其valueMissing的值为true；注意，此状态用于验证required元素，元素为空时，该属性为true，否则为false

3）typeMismatch
如果输入的内容不符合指定的格式，该属性为true