form表單的作用：
網(wǎng)站怎樣與用戶進行交互？答案是使用HTML表單(form)鹿寨。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端颂郎，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)谒获。
語法：<form method="傳送方式" action="服務(wù)器文件">
注意事項：
- <form> ：<form>標簽是成對出現(xiàn)的扳埂，以<form>開始业簿，以</form>結(jié)束。
- action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個PHP頁面(save.php)阳懂。
- method ： 數(shù)據(jù)傳送的方式（get/post）梅尤。
常見的input標簽:
- submit 用于數(shù)據(jù)提交
- text 可輸入文本
- password 用于輸入密碼，輸入內(nèi)容會呈現(xiàn)為小圓點岩调，進行隱藏
- checkbox 多選框
- radio 多選框
- select 下拉選擇 并和 option標簽一起使用
- file 上傳文件
- hidden 隱藏組件
- bottom 按鈕
- reset 重置表單
get與post的差別：
本質(zhì)上的區(qū)別是語義的區(qū)別巷燥，根據(jù)HTTP規(guī)范，GET的語義是請求獲取指定的資源号枕。GET方法是安全矾湃、冪等、可緩存的堕澄。POST的語義是根據(jù)請求負荷（報文主體）對指定的資源做出處理，具體的處理方式視資源類型而不同霉咨。POST不安全蛙紫，不冪等，（大部分實現(xiàn)）不可緩存途戒。具體差別如下：
- get在后退刷新時是無害的坑傅，post會重新提交請求；
- get參數(shù)通過URL傳遞喷斋，post放在Request body中唁毒；
- get請求參數(shù)保留在瀏覽器歷史記錄中蒜茴，post參數(shù)不會保留；
- get產(chǎn)生的URL地址可以被存為書簽浆西，而post不可以粉私；
- 對參數(shù)的數(shù)據(jù)類型，get只接受ASCII字符近零，而post沒有限制诺核；
- get比post更不安全，因為發(fā)送的數(shù)據(jù)顯示在URL上久信，在發(fā)送密碼或其他敏感信息時絕不要使用get;
- get請求只能進行url編碼窖杀，而post支持多種編碼方式。
input中name的作用：
- 將name屬性相同的分為一組裙士，對提交的表單數(shù)據(jù)進行標識入客。通過不同的name區(qū)別提交的value值是什么
- 在單選按鈕中，name值相同的單選按鈕被歸為一組腿椎，在該組中只有一個按鈕的checked屬性為true桌硫。
- 總的來說，input的name屬性用于提交一個form表單數(shù)據(jù)時酥诽，對數(shù)據(jù)的引用：
如<input type="text" name="text"/>用GET方式發(fā)送數(shù)據(jù)時鞍泉，你能在URL地址中看到xxx.html?text=123 - 可以用于CSS中設(shè)置該類name值的元素的樣式。
- 通過js的document.getElementsByTagName("atext")和jQ的$(".atext")等可以獲取name屬性值為atext的元素對象肮帐。
radio 如何分組?
通過name屬性來分組咖驮，name值相同的單選按鈕被歸為一組。例如：
<input type="radio" name="sex" >男
<input type="radio" name="sex" >女
<input type="radio" name="sex1" >男
<input type="radio" name="sex1" >女
前兩個為一組训枢，name為sex托修；后兩個為一組，name為sex1恒界。
placeholder 屬性的作用：
placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）睦刃，設(shè)置之后在輸入框顯示灰色提示文字。該提示會在輸入字段為空時顯示十酣，并會在字段獲得焦點時消失涩拙。
type=hidden隱藏域的作用：
表單隱藏域在頁面上對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息耸采，以利于被處理表單的程序所使用兴泥。通過隱藏域設(shè)置驗證信息，用戶提交信息后虾宇，隱藏域的數(shù)據(jù)也被提交到后臺搓彻，后臺進行校驗，提高安全性。
例如可以用來防止CSRF攻擊旭贬。如果是非法用戶惡意提交表單的話怔接，value里的值對不上，服務(wù)器會拒絕該請求稀轨。
用法實例：
文本輸入框扼脐、密碼輸入框
<form method="post" action="save.php">
賬戶:
<input type="text" name="myName" />
<br>
密碼:
<input type="password" name="pass" />
</form>
文本域，支持多行文本輸入
<form method="post" action="save.php">
<label>聯(lián)系我們</label>
<textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea>
</form>
使用單選框靶端、復選框谎势，讓用戶選擇
<form action="save.php" method="post" >
<label>性別:</label>
<label>男</label>
<input type="radio" value="1" name="gender" checked"/>
<label>女</label>
<input type="radio" value="2" name="gender" />
</form>
使用下拉列表框，節(jié)省空間
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅游">旅游</option>
<option value="運動">運動</option>
<option value="購物" selected="selected">購物</option>
</select>
</form>
<form action="save.php" method="post" >
<label>愛好:</label>
<select multiple="multiple">
<option value="看書">看書</option>
<option value="旅游">旅游</option>
<option value="運動">運動</option>
<option value="購物" selected="selected">購物</option>
</select>
</form>
使用提交按鈕杨名，提交數(shù)據(jù)
<form method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" value=" " name="myName " />
<input type="submit" value="提交" />
</form>
使用重置按鈕脏榆，重置表單信息
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅游" selected="selected">旅游</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
<input type="submit" value="確定" />
<input type="reset" value="重置" />
</form>
form表單中的label標簽
label標簽不會向用戶呈現(xiàn)任何特殊效果，它的作用是為鼠標用戶改進了可用性台谍。如果你在 label 標簽內(nèi)點擊文本须喂，就會觸發(fā)此控件。就是說趁蕊，當用戶單擊選中該label標簽時坞生，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上（就自動選中和該label標簽相關(guān)連的表單控件上）。
語法：
<label for="控件id名稱">
注意：標簽的 for 屬性中的值應當與相關(guān)控件的 id 屬性值一定要相同掷伙。
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<br />
<label for="email">輸入你的郵箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
