h5-表單元素

###1.Html5 Forms概述,在Html5中:
        1.表單仍然使用<form>元素做爲容器,咱們能夠在其中設置基本的提交特性
            form的action指向一個服務器地址（接口）
        2.當用戶或開發人員提交頁面時,表單仍然用於向服務端發送表單中控件的值
            注意表單項的name屬性必須有值，服務器才能獲取表單
        3.全部以前的表單控件都保持不變
        4.仍然能夠使用腳本操做表單控件
        5.Htnl5以前的表單
            標籤爲input
                type:text:文本框
                type:password:密碼框
                type:radio:單選按鈕
                    注意以name分組，確保單選關係，也爲了後臺能成功獲取
                    必須有value屬性，爲了後臺獲取後的識別（不寫統一爲on）
                    checked屬性,選中控制
                type:checkbox:複選框
                    注意以name分組，確保爲一組，也爲了後臺能成功獲取
                    必須有value屬性，爲了後臺獲取後的識別（不寫統一爲on）
                    checked屬性,選中控制
                type:submit:提交按鈕
                type:reset:重置按鈕
                type:button:普通按鈕
            
            標籤爲select:下拉框
                name屬性在select標籤上
                multiple:可選多項
                子項能夠經過optgroup來進行分組
                    label屬性用來定義組名
                    子項爲option標籤
                        selected屬性,選中控制
                        必須有value屬性,爲了後臺獲取後的識別
            
            標籤爲textarea:文本域
            
            標籤爲button:按鈕
                type:submit:提交按鈕
                type:reset:重置按鈕
                type:button:普通按鈕
                
            標籤爲lable:控制文本與表單的關係
                for屬性指向一個input的id
                
            標籤fieldset 標籤legend:來爲表單分組    
                    
        6.attr & prop
        7.Html5 新增
        
###新增表單控件
        1.type:email :email地址類型
            當格式不符合email格式時，提交是不會成功的，會出現提示；只有當格式相符時，提交纔會經過
            在移動端獲焦的時候會切換到英文鍵盤
            
        2.type:tel :電話類型
            在移動端獲焦的時候會切換到數字鍵盤
        
        3.type:url :url類型
            當格式不符合url格式時，提交是不會成功的，會出現提示；只有當格式相符時，提交纔會經過
            
        4.type:search :搜索類型
            有清空文本的按鈕
            
        5.type:range  :  特定範圍內的數值選擇器
            屬性:min、max、step
        
        6.
          type:number          :  只能包含數字的輸入框
          type:color                     :  顏色選擇器
          type:datetime             :  顯示完整日期(移動端瀏覽器支持)
          type:datetime-local  :  顯示完整日期，不含時區
          type:time            :  顯示時間，不含時區
          type:date            :  顯示日期
          type:week            :  顯示周
          type:month           :  顯示月

            
###新增表單屬性
        placeholder  :  輸入框提示信息
            適用於form,以及type爲text,search,url,tel,email,password類型的input

　　　　如何選中placeholder--->      obj::-webkit-input-placeholder{}
            
        autofocus  :  指定表單獲取輸入焦點
        
        required  :  此項必填，不能爲空
        
        pattern : 正則驗證  pattern="\d{1,5}
        
        formaction 在submit裏定義提交地址
        
        list和datalist  :  爲輸入框構造一個選擇列表
                            list值爲datalist標籤的id
        
        
###表單驗證反饋
    validity對象，經過下面的valid能夠查看驗證是否經過，若是八種驗證都經過返回true，一種驗證失敗返回false
    node.addEventListener("invalid",fn1,false);     //表單驗證失敗時，觸發該事件
    　　eg：　　var ipt = document.querySelector("input[type=text]")

　　　　　　　　ipt.addEventListener("invalid",function(){

　　　　　　　　　　console.log(thid.validity);

　　　　　　　　});
    valueMissing       :  輸入值爲空時返回true
    typeMismatch      :  控件值與預期類型不匹配返回true
    patternMismatch  :  輸入值不知足pattern正則返回true
    
    tooLong           :  超過maxLength最大限制返回true
    rangeUnderflow   :  驗證的range最小值返回true
    rangeOverflow    :  驗證的range最大值返回true
    stepMismatch     :  驗證range 的當前值 是否符合min、max及step的規則返回true
    
    customError 不符合自定義驗證返回true
        setCustomValidity
        
###關閉驗證
    formnovalidate屬性