詳解HTML5表單新增屬性

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

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

在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>

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

<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>

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

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

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

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

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

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

可為表單所有元素添加一個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>

當用戶不輸入任何值時，單擊驗證，文本框旁邊會動態的添加一個標籤元素，標籤元素為請輸入姓名；當用戶在文本框中有輸入時，文字為請輸入姓名的標籤將被刪除。

可以在標籤（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.

當文本框（text或者textarea）處於為選擇狀態時輸入提示信息(灰色)

 <input type=text palceholder=hahah>

結合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>

當你在文本框中輸入你時，下面會出現三欄提示你是人、你是豬、你是狗，沒有關鍵字將不出現提示

autocomplete有三種值on、off、（不指定）。不進行指定時，使用遊覽器的默認值。使用方法如下

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

當你在文本框內輸入如我是人點擊提交後，返回前一頁，再在文本框中輸入我，就會出線提示我是人。

相當於直接在html部分用正則表達式判斷值輸入是否符合要求。

請輸入內容：<input type=text pattern=[0-9][AZ]{3}>

此段代碼要求輸入一個數字三個大寫字母，如果輸入不正確，則出現請與所要求的內容保持一致（谷歌）的提示。

針對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>

對於復選框來說，過去只有選取和與非選取狀態，html5中，可以在js中對該元素使用indeterminate屬性，以說明復選框尚未明確選取狀態。

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

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

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

• maxlength :使用整數值進行設定，用於限定textarea元素中可輸入文字的個數。
• wrap:可指定屬性值為soft與hard.當屬性為hard時，在沒有用回車鍵而是文字超出一排規定範圍而自動換行時，提交表單時會在換行處添加一個換行標誌。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持VeVb武林網！