Html5主要新增表單屬性
form屬性
在
HTML4中，表單內的從屬元素必須書寫在表單內部，而在HTML5中，可以把他們書寫在頁面上任何地方，然後為該元素指定一個form屬性，屬性值為該表單的id，這樣就可以聲明該元素從屬於指定表單了。
用法：
<form id="isForm">
<input type="text">
</form>
<textarea form="isForm" cols="30" rows="10"></textarea>formaction屬性
在
HTML4中，一個表單內的所有元素只能通過表單的action屬性被統一提交到另-個頁面，而在HTML5中可以為所有的提交按鈕，增加不同的formaction屬性，使單擊不同的按鈕時可以將表單提交到不同的頁面。
用法：
<form>
<input type="submit" name="s1" value="v1" formaction="xx.php">
<input type="submit" name="s2" value= formmethod屬性
在
HTML4中，一個表單內只能有一個action屬性用來對表單內所有元素統一指定提交頁面，所以每個表單內頁只有一個method屬性來統一指定提交方法。在HTML5中，可以使用formmethod屬性來對每一個表單元素分別指定不同的提交方法。
用法：
<form>
<input type="submit" name="s1" value="v1" formaction="xx.php" formmethod="post">
<input type="submit" name="s2" value="v2" formaction="yy.php" formmethod="get">
</form>formenctype屬性
在
HTML4中，表單元素具有一個enctype屬性，該屬性用於指定在表單發送到服務器之前應該如何對表單內的數據進行編碼。在HTML5中，可以使用formenctype屬性對表單元素分別指定不同的編碼方式。
用法
<form>
<!--第一種：空格變為加號，但是並不對特殊字符進行編碼-->
<input type="text" formenctype="text/plain">
<!--第二種：不對字符進行編碼-->
<input type="text" formenctype="multipart/form-data">
<!--第三種-->
<input type="text" formenctype="application/x-www-form-urlencoded">
</form>formtarget屬性
在
HTML4中，表單元素具有一個target屬性，該屬性用於指定在何處打開表單提交後所需要加載的頁面。
在
HTML5中，可以對多個提交按鈕分別使用formtarget屬性來指定提交後在何處打開所需加載的頁面。
用法：
<form>
<!--第一種：在新的標簽頁面中打開-->
<input type="submit" name="s1" value="v1" formaction="xx.php" formtarget="_blank">
<!--第二種：在當前框架中打開-->
<input type="submit" name="s2" value="v2" formaction="yy.php" formtarget="_self">
<!--第三種：在當前頁面中打開-->
<input type="submit" name="s3" value="v3" formaction="zz.php" formtarget="_top">
<!--第四種：在當前框架的父框架中打開-->
<input type="submit" name="s3" value="v3" formaction="zz.php" formtarget="_parent">
<!--第五種：在指定的框架中進行打開-->
<input type="submit" name="s3" value="v3" formaction="zz.php" formtarget="framename">
</form>autofocus屬性
為文本框、選擇框或按鈕控件加上
autofocus屬性，當畫面打開時，該控件自動獲得光標焦點。
用法：
<form>
<input type="text">
<input type="text" autofocus>
</form>required屬性
HTML5中新增的required屬性可以應用在大多數輸入元素上，在提交時，如果元素中內容為空白，則不允許提交，同時在瀏覽器中顯示信息提示文字
用法：
<input type="text" required>Iabels屬性
在
HTML5中，為所有可使用標簽的表單元素、button、select元素等，定義一個Iabels屬性，屬性值為一個NodeList對象，代表該元素所綁定的標簽元素所構成的集合。
用法：
<script>
function Validate() {
// body...
var txtName = document.getElementById('txt_name');
var button = document.getElementById('btnValidate');
var form = document.getElementById('testForm');
if(txtName.value.trim() == ""){
var label = document.createElement("label");
label.setAttribute("for","txt_name");
form.insertBefore(label,button);
txtName.labels[1].innerHTML = "請輸入姓名";
txtName.labels[1].setAttribute("style","font-size:9px;color:red;")
}
}
</script>
<form id="testForm">
<label id="test" for="txt_name"></label>
<input type="text" id="txt_name">
<input type="button" id="btnValidate" value="驗證" onclick="Validate()">
</form>效果：
標簽的control屬性
在
HTML5中，可以再標簽內部放置一個表單元素，並且通過該標簽的control屬性來訪問該表單元素
用法：
<script>
function setValue() {
var label = document.getElementById("label");
var textbox = label.control;
textbox.value = "010010";
}
</script>
<form>
<label id="label">
郵編：
<input type="text" id="txt_zip" maxlength="6">
<small>請輸入六位數字</small>
</label>
<input type="button" value="設定默認值" onclick="setValue()">
</form>效果：
文本框的placeholder屬性
placeholder是指當文本框處於未輸入狀態時顯示的輸入提示。當文本框處於未輸入狀態且未獲取光標焦點時，模糊顯示輸入提示文字。
用法：
<input type="text" placeholder="請輸入用戶名">效果：
文本框的list屬性
在
HTML5中，為單行文本框增加了一個list屬性，該屬性的值為某個datalist元素的id。datalist元素也是HTML5中新增的元素，該元素類似於選擇框，但是當用戶想要設定的值不在選擇列表之內時，允許自行輸入。datalist元素本身並不顯示，而是當文本框獲得焦點時以提示輸入的方式顯示。
用法：
<form>
<input type="text" name="greeting" list="greetings">
<!--datalist在默認狀態之下是none的，但是為了兼容各瀏覽器，獨立設置其display屬性為none-->
<datalist id="greetings" style="display: none">
<option value="HTML5學習">HTML5學習</option>
<option value="CSS3學習">CSS3學習</option>
<option value="JavaScript學習">JavaScript學習</option>
</datalist>
</form>效果：
Html5主要新增表單屬性