Html5（3）表單相關新特性

---

表單新增元素與屬性
①form 屬性 //form不再只是一個元素，還可以作爲一個屬性，指向特定的表單
舉例：

    <form id="testform">
        <input type="text"/>
    </form>
    <textarea form="testform">這個文本域屬於上面這個表單</textarea>

②formaction屬性   //HTML4中，一個表單所有元素只有一個提交地址；HTML5通過不同的formaction屬性，不同元素可以提交到多個不同頁面
③formmethod屬性   //由於HTML5 的表單中 不同的元素可以有不同的提交地址，因此也就允許不同元素可以有不同的提交方式
④formenctype屬性  //HTML4中 表單元素的enctype屬性用於指定發送請求前表單數據的編碼格式，HTML5允許表單元素各自用不同編碼格式
⑤formtarget屬性   //用於指定不同元素提交後，加載的頁面在何處打開
⑥autofocus屬性        //頁面打開時，爲文本框、選擇框，自動定位光標焦點。注意：不需要值，直接寫屬性即可
⑦required屬性     //提交時，進行非空校驗，如果提交的元素內容是空的，則不允許提交，且在瀏覽器中顯示提示值爲：required
⑧novalidate屬性   //規定表單提交時不對其進行驗證，值爲true 或 false

label標籤的control屬性 //HTML5中，可以在label標籤內部放一個表單元素，通過label的control屬性來訪問該表單元素
舉例，如圖1，圖2

文本框新增屬性

①list屬性//爲單行文本框添加的一個類似於下拉菜單的選項，是datalist元素的屬性，啓用在文本框中舉例

②autocomplete屬性 //值爲 on 或 off，當不希望瀏覽器記錄信息時，不啓用
③pattern屬性//設置正則表達式進行特定的檢查
④SelectionDirection屬性//對input 和 textarea元素，用戶在裏面用鼠標選取部分文字時，該屬性用來獲取選取文字的方向。正向值爲 forward，反向值爲backward

---

複選框新屬性

①indeterminate屬性    //給複選框添加一個狀態：“尚未明確是否選取”

image類型的input，提交按鈕的height、width屬性
用法：

    <form action="#" method="post">
    姓名:<input type="text" name="name"/>
        <input type="image" src="xx.jpg" alt="編輯" width="50" height="50"/>
        <!--上面這個圖片作爲提交按鈕-->
    </form>

---

input的新增類型：
這些新增類型可以簡化 表單的校驗過程，因爲預定義了input的類型以後，瀏覽器就會對input內容做一個類型校驗

包括：url、email、date（展示日期選框）、time（顯示時間選框）、datetime（UTC格式）/datetime-local、month、week
number（可指定最大最小值及步長屬性）、
number應用舉例：如圖 //注意，圖中獲取值用了 valueAsNumber；不可更改的input框加了 readonly 屬性
range（拖動條，可設置默認值、最大最小值及步長）、search、tel、color（顏色選擇器）、output（內容的輸出）