form 屬性和 formaction 屬性

在 HTML4 中，表單內的從屬元素必須書寫在表單內部，而在 HTML5 中，可以把他們書寫在頁面上任何地方，然後為該元素指定一個 form 屬性，屬性值為該表單的 id，這樣就可以宣告該元素從屬於指定表單了

<from id="tt">
    <input type="text">
</from>
<textarea form="tt"></textarea>

在 HTML4 中，一個表單內的所有元素只能通過表單的action屬性被統一提交到另一個頁面，而在HTML5中，可以為所有的提交按鈕，增加不同的formaction屬性，使單擊不同的按鈕可以將表單提交到不同的頁面

<from>
    <input type="submit" name="s1" value="v1" formaction="xxx1.jsp">
    <input type="submit" name="s2" value="v2" formaction="xxx2.jsp">
    <input type="submit" name="s3" value="v3" formaction="xxx3.jsp">
</from>

formmethod 和 formenctype 屬性

在 HTML4 中，一個表單內只能有一個 action 屬性用來對錶單內所有元素統一指定提交頁面，所以每個表單內頁只有一個 method 屬性來統一指定提交方法。在 HTML5 中，可以使用 formmethod 屬性來對每一個表單元素分別指定不同的提交方法。

<from id="tt">
    <input type="submit" name="n1" value="v1" formmethod="post" formaction="xxx1.jsp">提交
    <input type="submit" name="n2" value="v2" formmethod="get" formaction="xxx2.jsp">提交
</from>

在 HTML4 中，表單元素具有一個enctype屬性，該屬性由於指定表單傳送到伺服器之前，應該如何對錶單內的資料進行編碼。在 HTML5 中，可以使用formenctype ，對錶單元素分別指定不同的編碼格式

<from>
    <input type="text" formenctype="text/plain"><!--將空格轉化為加號，但不對特殊字元做處理-->
    <input type="text" formenctype="multipart/form-data"><!--上傳檔案時必須使用該值-->
    <input type="text" formenctype="application/x-www-form-urlencoded"><!--編碼所有字元，但表單屬性的action為get時，瀏覽器用當前的編碼方式，把表單資料轉化為一個字元-->
</from>

formtarget 屬性和 autofocus 屬性

在 HTML4 中，表單元素具有一個 target 屬性，該屬性用於指定在何處開啟表單提交後所需要載入的頁面。 在 HTML5 中，可以對多個提交按鈕分別使用 formtarget 屬性來指定提交後在何處開啟所需載入的頁面。

<from>
    <input type="submit" name="s1" value="v1" formtarget="_blank" formaction="xxx1.jsp">提交<!--瀏覽器的新頁面中開啟-->
    <input type="submit" name="s2" value="v2" formtarget="_self" formaction="xxx2.jsp">提交<!--相同框架的frame中開啟-->
    <input type="submit" name="s3" value="v3" formtarget="_parent" formaction="xxx3.jsp">提交<!--當前框架的父框架中開啟-->
    <input type="submit" name="s4" value="v4" formtarget="_top" formaction="xxx4.jsp">提交<!--當前視窗中開啟-->
    <input type="submit" name="s5" value="v5" formtarget="framename" formaction="xxx5.jsp">提交<!--指定控制元件站開啟-->
</from>

為文字框、選擇框或按鈕控制元件加上autofocus屬性，當畫面開啟時，該控制元件自動獲得游標焦點（必須是第一優先順序）

<form>
    <input type="text">
    <input type="text" autofocus><!--進入頁面，這個提示框獲得焦點-->
</form>

required 屬性和 labels 屬性

required 屬性可以應用在大多數輸入元素上，在提交時，如果元素中內容為空白，則不允許提交，同時在瀏覽器中顯示資訊提示文字。

<form>
    <input type="text" required>
    <input type="submit">
</form>

在HTML5 中，為所有可使用標籤的表單元素、button、select元素等，定義一個labels屬性，屬性值為一個Nodelist物件，代表該元素所繫結的標籤元素所構成的集合

<form id="mineForm">
    <label id="label" for="name"></label>
    <input type="text" id="name">
    <input type="button" id="btn" value="驗證" onclick="mineClick()">
</form>
<script>
    function mineClick() {
        /*找到控制元件input   id為name*/
        var name = document.getElementById('name');
        /*找到控制元件input  id為btn*/
        var btn = document.getElementById('btn');
        /*找到控制元件form id為mineForm*/
        var mineForm = document.getElementById('mineForm');
        if (name.value.trim() == "") {/*字元的非空判斷*/
            /*建立標籤label*/
            var label = document.createElement('label');
            /*給label新增for屬性*/
            label.setAttribute('for', 'name');
            /*將label放置在btn的前面*/
            mineForm.insertBefore(label, btn);
            /*name.labels 與name有關聯的label的集合，name.labels[1]新建的label為第二個*/
            /*給label的新增顯示內容*/
            name.labels[1].innerHTML = '請輸入使用者名稱';
            /*給label新增style屬性*/
            name.labels[1].setAttribute('style', 'font-size:15px;color:red')
        }
    }
</script>

control屬性與placeholder屬性

在HTML5中，可以再標籤內部放置一個表單元素，並且通過該標籤的control屬性來訪問該表單元素。placeholder是指當文字框處於未輸入狀態時顯示的輸入提示。當文字框處於未輸入狀態且未獲取游標焦點時，模糊顯示輸入提示文字。

<form>
    <label id="labelControl">
        郵箱:
        <input type="email" id="email">
        <small>請不要忘了@</small>
    </label>
    <input type="button" onclick="setValue()" value="設定值">
</form>
function setValue(){
        var label = document.getElementById('labelControl');
        var text = label.control;//利用control關聯到表單
        text.value = '[email protected]';
    }

<form>
    <input type="text" placeholder="請輸入使用者名稱">
</form>

list屬性和AutoComplete屬性

在HTML5中，為單行文字框增加了一個list屬性，該屬性的值為某個datalist元素的id。datalist元素也是HTML5中新增的元素，該元素類似於選擇框，但是當用戶想要設定的值不在選擇列表之內時，允許自行輸入。datalist元素本身並不顯示，而是當文字框獲得焦點時以提示輸入的方式顯示。

<form>
    <input type="text" list="firstList">
    <datalist id="firstList" style="display: none">
        <option value="學習1">學習1</option>
        <option value="學習2">學習2</option>
        <option value="學習3">學習3</option>
    </datalist>
</form>

幫助輸入所用的自動完成功能，是一個既節省輸入時間有十分方便的功能。使用AutoComplete屬性，安全性也可以得到很好的控制。

<form>
    <input type="text" list="firstList" autocomplete="on">
    <datalist id="firstList" style="display: none">
        <option value="學習1">學習1</option>
        <option value="學習2">學習2</option>
        <option value="學習3">學習3</option>
    </datalist>
</form>

pattern屬性和SelectionDirection屬性

在HTML5中，對input元素使用pattern屬性，並且將屬性值設為某個格式的正則表示式，在提交時會針對這些進行檢查，檢查其內容是否符合給定格式。當輸入的內容不符合給定格式時，則不允許提交，同時在瀏覽器中顯示資訊提示文字，提示輸入的內容必須符合給定格式。

<form action="測試.html">
    <input type="text" pattern="[a-z]{5}" name="password">
    <input type="submit">
</form>

這對input元素和textarea元素，HTML5增加了SelectionDirection屬性。當用戶在這裡個元素中用滑鼠選取部分文字時，可以使用該屬性來獲取選取方向。當用戶正向選取時，該屬性值為“forward”，當用戶反向選取時，該屬性值為“backward”。當用戶沒有選取時，預設為“forward”。

<form id="form1">
    <input type="text" name="text">
    <input type="button" value="點我" onclick="AD()">
</form>
function AD(){
        /*獲取id為 form1 的form 中id/name為 text 的input*/
        var control = document.forms['form1']['text'];
        var Direction = control.selectionDirection;
        alert(Direction);
    }

indeterminate屬性和image提交按鈕的height屬性與width屬性

對於複選框checkbox元素來說，過去只是選取與非選取這兩種狀態。在HTML5中，可以在JavaScript指令碼程式碼中對該元素使用indeterminate屬性，以說明覆選框處於“尚未明確是否選取”狀態。

<form>
    <input type="checkbox" indeterminate id="cb">
</form>
<script>
var cb = document.getElementById('cb');
cb.indeterminate = true;
</script>

針對型別為image的input元素，HTML5新增了兩個屬性，height、width分別用來指定圖片的高、寬。

<form>
    <input type="text">
    <input type="image" alt="圖片" src="static/img/a5.jpg" width="30" height="30">
</form>