1. 表單內元素的form屬性
在H5中可以把form放到頁面的任何地方，然后為該元素指定一個form屬性，屬性值為該表單的id,這樣就可以聲明該元素從屬于指定表單了
<form id="testform"> <input type="text"> </form> <textarea form="testform"></textarea>
2. 表單內元素的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. 表單內元素的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. 表單內元素的formenctype屬性
同上，作用與每一個元素，代碼略
5. 表單的formtarget屬性
同上，作用與每一個元素，代碼略
6.元素的autofocus屬性
為文本框、選擇框和按鈕控件等加上autofocus屬性，畫面打開時，將自動獲得焦點。
<input type="text" action="1-3.jsp" autofocus>提交到3頁面</form>
一個頁面上只能有一個控件具有autofocus屬性，不能濫用
7. required屬性
可以用在大多數輸入用的元素，若輸入的值為空則不允許提交，游覽器顯示文字信息提示用戶必須輸入內容。
8. labels屬性
可為表單所有元素添加一個lables屬性，屬性值為一個NodeList對象，代表該元素所綁定的標簽元素所構成的集合。
<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>當用戶不輸入任何值時，單擊驗證，文本框旁邊會動態的添加一個標簽元素，標簽元素為“請輸入姓名”；當用戶在文本框中有輸入時，文字為“請輸入姓名”的標簽將被刪除。
9. 標簽的control屬性
可以在標簽（label）內部放置一個表單元素，并通過該標簽的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位數字</small> </label> <input type="button" value="設置默認值" onclick="setValue()"> </form>在游覽器中打開頁面，單擊“設置默認值”按鍵，文本框中會顯示231456.
10. 文本框的placeholder屬性
當文本框（text或者textarea）處于為選擇狀態時輸入提示信息(灰色)
<input type="text" palceholder="hahah">
11. 文本框的list屬性
結合h5新增的datalist元素，制作提示框
text:<input type="text" name="greeting" list="greetings"> <!-- 使用style="display:none";將datalist元素設置為不顯示 --> <datalist id="greetings" style="display:none"> <option value="你是人">你是人</option> <option value="你是豬">你是豬</option> <option value="你是狗">你是狗</option> </datalist>
當你在文本框中輸入“你”時，下面會出現三欄提示“你是人”、“你是豬”、“你是狗”，沒有關鍵字將不出現提示
12. 文本框的autocomplete屬性
autocomplete有三種值"on"、"off"、""（不指定）。不進行指定時，使用游覽器的默認值。使用方法如下
<input type="text" name="greeting" list="greetings" autocomplete="on">
當你在文本框內輸入如“我是人”點擊提交后，返回前一頁，再在文本框中輸入“我”，就會出線提示“我是人”。
13. 文本框的pattern屬性
相當于直接在html部分用正則表達式判斷值輸入是否符合要求。
請輸入內容：<input type="text" pattern="[0-9][A-Z]{3}">
此段代碼要求輸入一個數字三個大寫字母，如果輸入不正確，則出現“請與所要求的內容保持一致（谷歌）”的提示。
14. 文本框的selectionDirection屬性
針對input的text和textarea元素，當用戶在這兩個元素中用鼠標選取部分文字時，可以使用該元素來獲取選擇方向。
<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. 復選框的indeterminate屬性
對于復選框來說，過去只有選取和與非選取狀態，html5中，可以在js中對該元素使用indeterminate屬性，以說明復選框“尚未明確選取”狀態。
<script> var cb = document.getElementById("cb"); //將indeterminate的屬性設置為true cb.indeterminate = true; </script> <input type="checkbox" indeterminate id="cb">indeterminate屬性測試16. image提交按鈕的height屬性與width屬性
<input type="image" src="img/2.png" width="23" height="23">
17. textarea元素的maxlength屬性與wrap屬性
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持VeVb武林網！
新聞熱點
疑難解答
