HTML5新表单

  　　1.Input 新类型：email  url  tel number range date color date week month.......

　　　　　　
     
       　　　　　　email:
      
      
      
 　　　　　　url:
      
      
      
 　　　　　　电话号码效果：（手机端）
      
      
      
 　　　　　　数字类型：
      
      
      
 　　　　　　范围类型：
      10
      
      
 　　　　　　颜色类型：
      
      
      
     

            
             
                                     
     
                  日期
      
      
      
            星期
      
      
      
            月份
      
      
      
            
      
      
        
     
    

2.input 新类型小案例：-----调色板

            
             
                                     
     
        红
        蓝
        绿
                    

运行效果图：

3.表单新元素：datalist  progress   meter  output  

　　

            
             
                                                 请选择            北京            天津            上海                        
        
        
            

4.表单新属性：placeholder--提供默认提示内容；

　　　　　　　multiple---允许输入多个值

　　　　　　　autofocus---自动获取焦点

　　　　　　　form--允许表单元素定义在表单之外。

            
             
                                     
     
                  用户名：
      
      
      
            email：
      
      
      
                  文本框：
      
      
      
                  
              
     
    

5  表单新验证！！！

验证属性：required属性：验证当前元素值为空。

　　　　　pattern属性：使用正则表达式验证当前元素是否为空。

　　　　　min和max属性：验证当前元素最小值或者最大值，一般用于number range 等元素。

　　　　　minlength和maxlength属性：minlength 验证当前元素的最小长度，输入值时，允许输入小于指定值，提交表单时，验证元素值的最小长度，注意！！minlength并不是html5的新属性。

　　　　　　　　　　　　　　　　　　　  maxlength验证当前元素值的最大长度，输入值时，长度不能大于指定值。

　　　　　validity属性，表单验证html5提供一种有效状态。有效状态通过validityState对象获取到。

 　　验证有效状态：

　　　　validityState对象提供了一系列的有效状态，通过，这些有效状态，进行判断，注意！！！所有验证状态，必须配合上述的验证属性使用。

       验证状态：

　　　　　valid ：判断当前元素值是否正确， 返回true 和false。

　　　　　valueMissing：判断当前元素值是否为空，配合required属性使用。

　　　　　typeMismatch：判断当前元素值的类型是否匹配  配合email number URL 等使用。

　　　　　patternMismatch：判断当前元素值是否与指定正则表达式匹配。配合pattern属性使用。

　　　　　tooLong：判断当前元素值的长度是否正确  配合maxlength属性　　

* 注意

* 使用maxlength属性后,实际不可能出现长度大于maxlength的值

* tooLong很难出现这种情况

　　　　　rangeUnderflow：判断当前元素值是否小于min属性值 配合min属性  并不能与max属性值进行比较。

　　　　　stepMismatch：判断当前元素值是否与step设置相符 配合step使用  并不能与min或max属性值进行比较。

　　　　　customError：配合setCustomValidity()方法  如果使用该方法,该状态返回true   

　　　　　　　　setCustomValidity()方法  设置自定义的错误提示内容    使用该方法设置错误信息  当输入正确时,调用该方法将信息设置为空("")    不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)

　

setCustomValidity()方法：作用 - 修改验证错误后的默认提示信息     
         
     
          用户名:
          
        
     
   

6 新表单验证完整案例1！！！！

     
         
     
          用户名:
      
      
    email地址:
      
      
    密码:
      
      
    确认密码:
      
      
    年龄:
      
      
    成绩:
      
      
    
      
      
      
    
        
     
   

7 6 新表单验证完整案例2！！！！

     
         
     
    
      
用户注册页面
    
      
        
       
                    
         
                          
用户名:
                          
                     
                     
                          
密码:
                          
                     
                     
                          
确认密码:
                          
                     
                     
                          
email地址:
                          
                     
                     
                          
个人主页:
                          
                     
                     
                          
年龄:
                          
                     
                     
                          
出生日期:
                          
                     
                     
                          
                          
                     
                
       
    
      
  
     
   

 

　　　　 后续的HTML内容会持续更新．．．．．．．．．．Ｏ．Ｏ　　　　　＝．＝