本文主要對HTML5表單新增屬性進(jìn)行詳細(xì)介紹，并附上實例解析，簡單易懂。需要的朋友一起來看下吧

1. 表單內(nèi)元素的form屬性

在H5中可以把form放到頁面的任何地方，然后為該元素指定一個form屬性，屬性值為該表單的id,這樣就可以聲明該元素從屬于指定表單了

<form id="testform">       <input type="text">      </form>      <textarea form="testform"></textarea>

2. 表單內(nèi)元素的formaction屬性

在H4中，表單的提交方式

<form action="1.jsp">  </form>

提交整個表單

在H5中，可以為表單的每一個屬性添加提交到的jsp頁面

<form action="1.jsp">       <input type="submit" action="1-1.jsp">提交到1頁面</form>       <input type="submit" action="1-2.jsp">提交到2頁面</form>       <input type="submit" action="1-3.jsp">提交到3頁面</form>      </form>

3. 表單內(nèi)元素的formmethod屬性

可以對表單的每一個元素指定提交方法

<form action="1.jsp">       <input type="submit" action="1-1.jsp" formmethod="post">提交到1頁面,post提交方法</form>       <input type="submit" action="1-2.jsp" formmethod="get">提交到2頁面，get提交方法</form>      </form>

4. 表單內(nèi)元素的formenctype屬性

同上，作用與每一個元素，代碼略

5. 表單的formtarget屬性

同上，作用與每一個元素，代碼略

6.元素的autofocus屬性

為文本框、選擇框和按鈕控件等加上autofocus屬性，畫面打開時，將自動獲得焦點。

<input type="text" action="1-3.jsp" autofocus>提交到3頁面</form>

一個頁面上只能有一個控件具有autofocus屬性，不能濫用

7. required屬性

可以用在大多數(shù)輸入用的元素，若輸入的值為空則不允許提交，游覽器顯示文字信息提示用戶必須輸入內(nèi)容。

8. labels屬性

可為表單所有元素添加一個lables屬性，屬性值為一個NodeList對象，代表該元素所綁定的標(biāo)簽元素所構(gòu)成的集合。

<script type="text/javascript">          window.onload = function () {           var text = document.getElementById('text');              var btn = document.getElementById('btn');              var form = document.getElementById('form');              btn.onclick = function() {                  if (text.value.trim() =="") {                   //alert(text.labels.length)                   if(text.labels.length==1) {                    var label = document.createElement("label");                    label.setAttribute("for","text");                    form.insertBefore(label,btn);                    text.labels[1].innerHTML = "請輸入姓名";                    text.labels[1].setAttribute(                 "style","font-size:9px;color:red");                   }                  }                  else if(text.labels.length>1)                   form.removeChild(text.labels[1]);                  }          }   </script>      <form id="form">        <label id="label" for="text">姓名：</label>       <input id="text">       <input id="btn" type="button" value="驗證">      </form>

當(dāng)用戶不輸入任何值時，單擊驗證，文本框旁邊會動態(tài)的添加一個標(biāo)簽元素，標(biāo)簽元素為“請輸入姓名”；當(dāng)用戶在文本框中有輸入時，文字為“請輸入姓名”的標(biāo)簽將被刪除。

9. 標(biāo)簽的control屬性

可以在標(biāo)簽（label）內(nèi)部放置一個表單元素，并通過該標(biāo)簽的control屬性來訪問該表單元素。

<script type="text/javascript">          function setValue() {           console.log(1);           var label =document.getElementById("label");           var textbox = label.control;           textbox.value = "231456"          }           </script>               <form>       <label id="label">        郵編：        <input id="txt_zip" maxlength="6">        <small>請輸入6位數(shù)字</small>       </label>       <input type="button" value="設(shè)置默認(rèn)值" onclick="setValue()">      </form>

在游覽器中打開頁面，單擊“設(shè)置默認(rèn)值”按鍵，文本框中會顯示231456.

10. 文本框的placeholder屬性

當(dāng)文本框（text或者textarea）處于為選擇狀態(tài)時輸入提示信息(灰色)

<input type="text" palceholder="hahah">

11. 文本框的list屬性

結(jié)合h5新增的datalist元素，制作提示框

text:<input type="text" name="greeting" list="greetings">      <!-- 使用style="display:none";將datalist元素設(shè)置為不顯示 -->      <datalist id="greetings" style="display:none">       <option value="你是人">你是人</option>       <option value="你是豬">你是豬</option>       <option value="你是狗">你是狗</option>      </datalist>

當(dāng)你在文本框中輸入“你”時，下面會出現(xiàn)三欄提示“你是人”、“你是豬”、“你是狗”，沒有關(guān)鍵字將不出現(xiàn)提示

12. 文本框的autocomplete屬性

autocomplete有三種值"on"、"off"、""（不指定）。不進(jìn)行指定時，使用游覽器的默認(rèn)值。使用方法如下

<input type="text" name="greeting" list="greetings" autocomplete="on">

當(dāng)你在文本框內(nèi)輸入如“我是人”點擊提交后，返回前一頁，再在文本框中輸入“我”，就會出線提示“我是人”。

13. 文本框的pattern屬性

相當(dāng)于直接在html部分用正則表達(dá)式判斷值輸入是否符合要求。

請輸入內(nèi)容：<input type="text" pattern="[0-9][A-Z]{3}">

此段代碼要求輸入一個數(shù)字三個大寫字母，如果輸入不正確，則出現(xiàn)“請與所要求的內(nèi)容保持一致（谷歌）”的提示。

14. 文本框的selectionDirection屬性

針對input的text和textarea元素，當(dāng)用戶在這兩個元素中用鼠標(biāo)選取部分文字時，可以使用該元素來獲取選擇方向。

<script type="text/javascript">          function alertSelectionDirection() {           var control = document.forms[0]['text'];           var Direction = control.selectionDirection;           alert(Direction);          }   </script>   <form>       <input type="text" name="text">       <input type="button" value="惦記我" onclick="alertSelectionDirection()" >          </form>

15. 復(fù)選框的indeterminate屬性

對于復(fù)選框來說，過去只有選取和與非選取狀態(tài)，html5中，可以在js中對該元素使用indeterminate屬性，以說明復(fù)選框“尚未明確選取”狀態(tài)。

  <script>          var cb = document.getElementById("cb");          //將indeterminate的屬性設(shè)置為true          cb.indeterminate = true;          </script>          <input type="checkbox" indeterminate id="cb">indeterminate屬性測試

16. image提交按鈕的height屬性與width屬性

• height:指定圖片按鈕中圖片的高度；

• width:指定圖片按鈕中圖片的寬度；

<input type="image" src="img/2.png" width="23" height="23">

17. textarea元素的maxlength屬性與wrap屬性

• maxlength :使用整數(shù)值進(jìn)行設(shè)定，用于限定textarea元素中可輸入文字的個數(shù)。

• wrap:可指定屬性值為soft與hard.當(dāng)屬性為hard時，在沒有用回車鍵而是文字超出一排規(guī)定范圍而自動換行時，提交表單時會在換行處添加一個換行標(biāo)志。