前面的話
表單是網頁與用戶的交互工具，由一個<form>元素作為容器構成，封裝其他任何數量的表單控件，還有其他任何<body>元素里可用的標簽
表單能夠包含<input>、<menus>、<textarea>、<fieldset>、<legend>、<label>等表單控件元素
[注意]表單里嵌套表單是不允許的
form元素
form元素有accept-charset、action、autocomplete、enctype、method、name、novalidate、target共8個屬性，其中action和name屬性為必需項
表單名稱
name屬性規定表單名稱，如果name="test"，則Javascript可以使用document.forms.test來獲取該表單
<form method="get" action="form.php" name="test"></form>
<script>
var oForm = document.forms.test;
console.log(oForm.method);//get
</script>
字符集
accept-charset 屬性是一個空格分隔的字符集列表，規定了服務器處理表單數據所接受的字符集。accept-charset 屬性允許指定一系列字符集，服務器必須支持這些字符集，從而得以正確解釋表單中的數據。該屬性的值是用引號包含字符集名稱列表。如果可接受字符集與用戶所使用的字符即不相匹配的話，瀏覽器可以選擇忽略表單或是將該表單區別對待。此屬性的默認值是 "unknown"，表示表單的字符集與包含表單的文檔的字符集相同。在之前版本的HTML中，不同的字符編碼可以用空格或逗號分隔。在HTML5中，只有空格可以允許作為分隔符
提交地址
action屬性規定提交表單時，向何處發送表單數據；如果忽略這個屬性，表單會重定向到表單所在的URL。這個值可以被 <button> 或者 <input> 元素中的 formaction屬性重載(覆蓋)
打開方式
target屬性規定在何處打開action URL。共5個值_blank、_self、_parent、_top、framename。
數據編碼
enctype 屬性規定在發送到服務器之前應該如何對表單數據進行編碼。大多數情況下該屬性不需要設置。這個值可以被 <button> 或者 <input> 元素中的 formenctype屬性重載(覆蓋)。當 method屬性值為 post時， enctype是提交form給服務器的內容的 MIME 類型 。可能的取值有:
application/x-www-form-urlencoded 在發送前編碼所有字符（默認）
multipart/form-data 不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值
text/plain 空格轉換為 "+" 加號，但不對特殊字符編碼
數據發送
表單可以用兩種方式(method)發送數據：GET和POST，默認為GET方法。這個值可以被 <button> 或者 <input> 元素中的 formmethod屬性重載(覆蓋)
POST方法
如果采用POST方法，瀏覽器將會按照下面兩步來發送數據。首先，瀏覽器將與action屬性中指定的表單處理服務器建立聯系，一旦建立連接之后，瀏覽器就會按分段傳輸的方法將數據發送給服務器
在服務器端，一旦POST樣式的應用程序開始執行時，就應該從一個標志位置讀取參數，而一旦讀到參數，在應用程序能夠使用這些表單值以前，必須對這些參數進行解碼。用戶特定的服務器會明確指定應用程序應該如何接受這些參數
【應用場景】
[1]大數據處理，因為POST方法相比GET方法而言，處理更多字段
[2]安全數據，因為GET 方法將表單參數直接放在應用程序的 URL 中，這樣網絡窺探者可以很輕松地捕獲它們，還可以從服務器的日志文件中進行摘錄；而POST方法則沒有這方面的漏洞
GET方法
如果采用GET方法，瀏覽器會與表單處理服務器建立連接，然后直接在一個傳輸步驟中發送所有的表單數據：瀏覽器會將數據直接附在表單的action URL之后。這兩者之間用問號進行分隔。
【應用場景】
[1]獲得最佳表單傳輸性能，因為GET發送只有少數簡單字段
[2]簡單處理，因為GET方法無需處理編碼解碼方法
[3]傳參處理，因為GET方法允許把表單的參數包括進來作為 URL 的一部分
<h3>get方法</h3>
<form method="get" action="form.php" target = "_blank">
<p><label>x:<input name="x"></label></p>
<p><label>y:<input name="y"></label></p>
<p><button type="submit">Submit</button></p>
</form>
<a title="form.php?x=28&y=66" href="form.php?x=28&y=66">a標簽傳參</a>
<h3>post方法</h3>
<form method="post" action="form.php" target = "_blank">
<p><label>x:<input name="x"></label></p>
<p><label>y:<input name="y"></label></p>
<p><button type="submit">Submit</button></p>
</form>
//GET方法的URL顯示為： http://127.0.0.1/form.php?x=1&y=2 //POST方法的URL顯示為：http://127.0.0.1/form.php <p> <?php if(isset($_REQUEST["x"]) && isset($_REQUEST["y"])){ echo "x: " .$_REQUEST["x"] ."<br>"; echo "y: " .$_REQUEST["y"]; } ?> </p>
自動完成
autocomplete是HTML5新增的一個屬性，規定表單是否應該啟用自動完成功能。當用戶在字段開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在字段中填寫的選項
[注意]IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性才有效
<form autocomplete="on | off"> //該屬性默認為on，當設置為off時，規定禁用自動完成功能
<button id="btn1">打開自動完成</button>
<button id="btn2">關閉自動完成</button>
<form method="get" action="#" name="test">
<p><label>x:<input name="x"></label></p>
<p><label>y:<input name="y"></label></p>
<p><button type="submit">Submit</button></p>
</form>
<script>
var oForm = document.forms.test;
btn1.onclick = function(){
oForm.autocomplete = 'on';
};
btn2.onclick = function(){
oForm.autocomplete = 'off';
};
</script>
表單驗證
novalidate是HTML5新增的一個屬性，規定當提交表單時不對其進行驗證
[注意]IE9-不支持
<button id="btn1">打開驗證</button> <button id="btn2">關閉驗證</button> <form method="get" action="#" name="test"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form> <script> var oForm = document.forms.test; btn1.onclick = function(){ oForm.removeAttribute('novalidate'); }; btn2.onclick = function(){ oForm.setAttribute('novalidate',''); }; </script>