一肩碟、form 表單有什么作用贸辈？有哪些常用的 input 標(biāo)簽，分別有什么作用碰逸？
<form>標(biāo)簽是 HTML 的原生標(biāo)簽乡小，主要用來向服務(wù)器傳輸數(shù)據(jù)，一個 form 表單如下：
<form action="url" method="GET"></form>
其中
action代表該表單數(shù)據(jù)要提交到的服務(wù)器地址饵史，method表示提交方式满钟，一般有 GET、POST胳喷，兩者的差別后面會講湃番。<form>只是包裹輸入數(shù)據(jù)的標(biāo)簽而已，要有輸入框才能提交啊吭露，所以這時候需要有 input 吠撮。
<!-- 常用輸入框，用于文本輸入 -->
<input type="text" name="text" placeholder="請輸入">
<!-- 密碼輸入讲竿，非明文顯示 -->
<input type="password" name="text" placeholder="密碼">
<!-- 單選框泥兰，往往兩個以上出現(xiàn) -->
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<!-- 多選框 -->
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">寵物
<input type="checkbox" name="hobby">游戲
<!-- 按鈕 -->
<input type="button" value="點我">
表單里面可不僅有
<input>弄屡，還有<textarea><label><select>等標(biāo)簽?zāi)亍?/p>
二、POST 和 GET 方式的區(qū)別
不管其他更復(fù)雜的東西鞋诗，單純比較這兩種方式的話：
| 對比 | GET | POST |
|---|---|---|
| 類型 | 用來獲取資源（Read） | 用來新建或者更新資源（Create） |
| 傳輸方式 | URL 方式膀捷，如https://google.com?a=1&b=2，用戶能直接看到 |
放入請求主體师脂，不顯式顯示 |
| 服務(wù)端安全 | 安全担孔，僅請求，無法改變服務(wù)器資源狀態(tài) | 不安全吃警，請求失敗后糕篇，只能等服務(wù)器響應(yīng)才能重復(fù)請求，否則結(jié)果可能不一致 |
| 客戶端安全 | 不安全酌心，URL暴露數(shù)據(jù)內(nèi)容 | 相對安全拌消，數(shù)據(jù)在請求體中，但能在開發(fā)者工具 network 中看到 |
| 緩存 | 可緩存結(jié)果 | 不可緩存 |
| 請求限制 | 因為是URL方式安券，有長度限制墩崩，2K到4K左右 | 沒有長度要求 |
| 編碼類型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded, application/json, multipart/form-data, text/html |
我認(rèn)為，GET 是更加安全的一種請求方式侯勉，因為它僅僅是一個獲取資源的請求鹦筹，對于服務(wù)器的資源沒有修改，POST 是修改服務(wù)器資源的址貌，兩個動作決定了誰更加安全铐拐。至于說 GET 因為數(shù)據(jù)顯示在 URL 中而不安全，本來 GET 就是獲取信息的练对，你要加上重要信息為什么還用 GET 遍蟋？加重要信息不是意味著告訴服務(wù)器“我很重要”嗎？應(yīng)該用 POST 啊螟凭。
注： 上述提到的資源均指服務(wù)器的資源虚青，如 HTML、CSS螺男、JS棒厘、數(shù)據(jù)庫等。參考：
HTTP Methods for RESTful Services
理解RESTful架構(gòu) —— 阮一峰
HTTP 方法: GET 和 POST —— W3C
三下隧、在 input 里绊谭， name 有什么用？
上面說了汪拥，input 是填寫數(shù)據(jù)的框框，當(dāng)你提交表單之后篙耗，這個 input 里面寫的內(nèi)容就提交到服務(wù)器了迫筑，那么我們假設(shè)一下現(xiàn)在是登錄宪赶，有帳號名（a294465800）和密碼（123456），所以我們提交的形式就是這樣：
a294465800
123456
我們知道賬戶名是
a294465800脯燃，密碼是123456搂妻，服務(wù)器：“？辕棚？欲主？”。（黑人問號）服務(wù)器不知道笆藕俊扁瓢！所以給他加個name，如下：
<form action="url" method="POST">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">登錄</button>
</form>
然后提交之后补君，數(shù)據(jù)就應(yīng)該是這樣了：
username: a294465800
password: 123456
服務(wù)器：“明白了引几！”。你明白了嗎挽铁？
四伟桅、radio 如何分組？
radio 是
<input>標(biāo)簽的一個類型叽掘，叫單選框楣铁，和上面一樣，name的作用是告訴服務(wù)器你這是啥數(shù)據(jù)更扁，所以盖腕，同一個name的 radio 就是同一組內(nèi)容了：
<!-- 一組性別 -->
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<!-- 一組愛好 -->
<input type="radio" name="hobby">宅
<input type="radio" name="hobby">不宅
五、placeholder 屬性有什么用疯潭？
為了好看赊堪。
placeholder中文是：占位符。就是說竖哩，反正你還沒輸入哭廉，我占個位置先，這樣看起來不會空蕩蕩相叁，還能順帶告訴你這里輸入啥遵绰，如下：
<input type="text" placeholder="這里輸入帳號名啦！">
<input type="password" placeholder="這里輸入密碼增淹，親椿访！">
六、 type = hidden 隱藏域有什么作用虑润？舉例說明
隱藏成玫，代表著不想給你看到，或者暫時不想讓你看到，所以：
- 做觸發(fā)事件哭当，比如點擊一個按鈕猪腕，這個
input就不再隱藏了，而顯示了钦勘。 - 收集一下必須的陋葡，但又不想讓用戶知道的數(shù)據(jù)，例如：上傳文件彻采，用戶選擇之后文件會立即被上傳腐缤，但后端要判斷這個圖片是誰上傳的，所以會有個
baseurl返回來綁定這個用戶肛响，這樣就知道是這個用戶上傳的了岭粤。 - 當(dāng)全局變量用，而這個全部變量可能會根據(jù)訪問的路由不同（鏈接）终惑，需要的全局變量也不同绍在，所以干脆弄個隱藏的控件來保存這個數(shù)據(jù)。
七雹有、HTML 表單的基本用法
HTML 提交數(shù)據(jù)用的最多的就是表單了偿渡，所以，除非用的是
AJAX來異步提交霸奕，否則你都是需要用到<form>標(biāo)簽的溜宽。<form>標(biāo)簽就像定義了一個域，里面的內(nèi)容都是需要提交的信息质帅，當(dāng)你定義了一個提交按鈕后type = submit适揉，點擊提交，頁面就會把信息傳到服務(wù)器煤惩，同時也刷新了頁面嫉嘀，所以一個頁面是要避免有兩個表單的喔∑侨啵可供輸入的控件有：<input>剪侮、<textarea>、<button>洛退、<select>瓣俯，其中<input>還有相當(dāng)多種類型供選擇。
只要保證輸入控件都在<form>里面兵怯，那么我們就可以用type=submit和type="reset"這兩個原生的事件了彩匕，前一個是提交表單信息，后一個是重置表單信息（清空Ｃ角）
講了這么多驼仪，不如直接來張表單看看掸犬？預(yù)覽地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 表單</title>
</head>
<body>
<form action="">
<div class="form-group">
<label for="username">姓名：</label>
<input type="text" placeholder="用戶名" id="username">
</div>
<div class="form-group">
<label for="password">密碼：</label>
<input type="password" placeholder="密碼" id="password">
</div>
<div class="form-group">
<span>性別：</span>
<label>
<input type="radio" name="sex" checked>男
</label>
<label>
<input type="radio" name="sex">女
</label>
</div>
<div class="form-group">
<span>取向：</span>
<label>
<input type="radio" name="love">男
</label>
<label>
<input type="radio" name="love" checked>女
</label>
</div>
<div class="form-group">
<span>愛好：</span>
<label>
<input type="checkbox" name="hobby">旅游
</label>
<label>
<input type="checkbox" name="hobby">游戲
</label>
<label>
<input type="checkbox" name="hobby">運動
</label>
<label>
<input type="checkbox" name="hobby">寵物
</label>
</div>
<div class="form-group">
<label for="comment">評論：</label>
<textarea name="comment" id="comment" cols="50" rows="10"></textarea>
</div>
<div class="form-group">
<span>我的car：</span>
<select name="car" id="car">
<option value="1">寶馬</option>
<option value="2">奔馳</option>
<option value="3" selected>特斯拉</option>
</select>
</div>
<div class="form-group">
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>
</body>
</html>
