1. form表單有什么作用击蹲？有哪些常用的input 標(biāo)簽，分別有什么作用爱咬？
- 表單的作用是收集用戶的輸入信息，用戶提交表單時向服務(wù)器傳輸數(shù)據(jù)绊起，從而實(shí)現(xiàn)用戶與web服務(wù)器的交互;
- input標(biāo)簽使用type屬性規(guī)定input元素的類型，常見有以下類型：
| type | 描述 |
|---|---|
| text | 默認(rèn)燎斩。定義單行輸入字段虱歪，用戶可在其中輸入文本 |
| password | 定義密碼字段。字段中的字符會被遮蔽 |
| checkbox | 定義復(fù)選框 |
| radio | 定義單選按鈕 |
| file | 定義輸入字段和 "瀏覽..." 按鈕栅表，供文件上傳 |
| submit | 定義提交按鈕笋鄙。提交表單向服務(wù)器發(fā)送數(shù)據(jù)。 |
| reset | 定義重置按鈕怪瓶。重置按鈕會將所有表單字段重置為初始值 |
| button | 義可點(diǎn)擊的按鈕（大多與 JavaScript 使用來啟動腳本） |
| hidden | 定義隱藏輸入字段 |
其它類型的input標(biāo)簽可以參考w3school
2. post 和 get 方式的區(qū)別萧落？
- 對數(shù)據(jù)長度的限制不同
- GET 方法向 URL 添加數(shù)據(jù)，URL 的最大長度是 2048 個字符；
- POST 方法傳輸?shù)臄?shù)據(jù)理論上沒有長度限制找岖；
- 對數(shù)據(jù)類型的限制不同
- GET 方法的URL中只允許出現(xiàn)ASCII字符陨倡，對非ASCII字符會先編碼成ASCII字符再發(fā)送請求；
- POST 方法的數(shù)據(jù)在body中许布，對數(shù)據(jù)類型沒有限制兴革，允許二進(jìn)制數(shù)據(jù)傳輸；
- POST比GET更安全
- GET 方法的查詢字符串直接暴露在URL中蜜唾，在瀏覽器地址欄和瀏覽器歷史中都可以看到杂曲，不利于敏感數(shù)據(jù)的安全傳輸；
- POST 方法的請求數(shù)據(jù)都包含在body中袁余，不會直接暴露出來擎勘，相對于GET，安全性更好颖榜；
- 語義不同
- GET的語義是請求獲取指定的資源货抄；
- POST的語義是根據(jù)請求對指定的資源做出處理，具體的處理方式視資源類型而不同朱转。
3. 在input里蟹地，name 有什么作用？
name 屬性規(guī)定 input 元素的名稱藤为，用于對提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識怪与，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)；只有設(shè)置了 name 屬性的表單元素才能在提交表單時傳遞它們的值缅疟。
4. radio 如何分組?
具有相同 name 屬性的 radio 為同一組分别，例如：
<form>
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
</form>
5. placeholder 屬性有什么作用?
提供描述輸入字段的提示信息，該提示會在輸入字段為空時顯示存淫，并會在字段獲得焦點(diǎn)時消失
note：剛剛試了一下耘斩，IE中會在字段獲得焦點(diǎn)時消失，但是在chrome里面輸入字符后才會消失
6. type=hidden隱藏域有什么作用? 舉例說明
幫助表單收集和發(fā)送信息桅咆，便于后端處理數(shù)據(jù)括授。用戶點(diǎn)擊提交數(shù)據(jù)的時候，隱藏域的信息也被一起發(fā)送到了后端;
后端接收前端傳來的數(shù)據(jù)岩饼，需要確認(rèn)前端的身份荚虚，那么就可以加一個隱藏域，后端通過校驗隱藏域信息來確認(rèn)前端身份;
有些時候一個form里有多個提交按鈕籍茧，怎樣使程序能夠分清楚到底用戶是按那一個按鈕提交上來的呢版述？我們就可以寫一個隱藏域，然后在每一個按鈕處加上onclick="document.form.command.value="xx""然后我們接到數(shù)據(jù)后先檢查command的值就會知道用戶是按的那個按鈕提交上來的寞冯；
有時候一個網(wǎng)頁中有多個form渴析，我們知道多個form是不能同時提交的晚伙，但有時這些form確實(shí)相互作用，我們就可以在form中添加隱藏域來使它們聯(lián)系起來;
JavaScript不支持全局變量俭茧，但有時我們必須用全局變量咆疗，我們就可以把值先存在隱藏域里，它的值就不會丟失了;
還有個例子恢恼，比如按一個按鈕彈出四個小窗口民傻，當(dāng)點(diǎn)擊其中的一個小窗口時其他三個自動關(guān)閉．可是IE不支持小窗口相互調(diào)用，所以只有在父窗口寫個隱藏域场斑，當(dāng)小窗口看到那個隱藏域的值是close時就自己關(guān)掉漓踢。
7. HTML 表單的基本用法
HTML表單用
<form>標(biāo)簽創(chuàng)建，用于向服務(wù)器傳輸用戶輸入的數(shù)據(jù),表單能夠包含 input 元素漏隐，比如文本字段喧半、復(fù)選框、單選框青责、提交按鈕等等挺据，表單還可以包含 menus、textarea脖隶、fieldset扁耐、legend 和 label 元素。
表單元素input的常用類型已經(jīng)在上文介紹過产阱，下面再介紹form標(biāo)簽不同屬性的作用
-
action: 該屬性規(guī)定當(dāng)提交表單時婉称，向何處發(fā)送表單數(shù)據(jù)
可能的值：- 絕對 URL - 指向其他站點(diǎn)（比如 src="www.example.com/example.htm"）
- 相對 URL - 指向站點(diǎn)內(nèi)的文件（比如 src="example.htm"）
- method: 該屬性規(guī)定如何發(fā)送表單數(shù)據(jù),最常用的取值是”GET“和”POST“；
- target: 該屬性規(guī)定在何處打開 action URL构蹬，取值有_blank（在新窗口中打開）王暗、_self（在相同的框架中打開，默認(rèn)值）庄敛、_parent（在父框架中打開）俗壹、_top（在整個窗口中打開）和framename（在指定的框架中打開）；
- name: 該屬性規(guī)定表單的名稱藻烤，并且提供了一種在腳本中引用表單的方法绷雏；
- enctype: 該屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進(jìn)行編碼，默認(rèn)值為 "application/x-www-form-urlencoded"隐绵，在發(fā)送到服務(wù)器之前之众，所有字符都會進(jìn)行編碼（空格轉(zhuǎn)換為 "+" 加號，特殊符號轉(zhuǎn)換為 ASCII HEX 值）依许；“multipart/form-data”：不對字符編碼。在使用包含文件上傳控件的表單時缀蹄，必須使用該值峭跳。
下面附上表單代碼實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>task5-form</title>
</head>
<body>
<div class="userinfo">
<form action="/userinfo" name="userinfo" method="POST">
<div class="username">
<label for="username">姓名：</label>
<input type="text" id="username" name="username" placeholder="用戶名">
</div>
<div class="password">
<label for="password">密碼：</label>
<input type="password" id="password" name="password" value="123456">
</div>
<div class="sex">
<label>性別：</label>
<input type="radio" name="sex" value="0" checked>男
<input type="radio" name="sex" value="1">女
</div>
<div class="orientation">
<label>取向：</label>
<input type="radio" name="orientation" value="0">男
<input type="radio" name="orientation" value="1" checked>女
</div>
<div class="hobby">
<label>愛好：</label>
<input type="checkbox" name="hobby" value="0">dota
<input type="checkbox" name="hobby" value="1" checked>旅游
<input type="checkbox" name="hobby" value="2" checked>寵物
</div>
<div class="comment">
<label for="comment">評論：</label>
<textarea name="comment" id="comment" cols="30" rows="10" placeholder="ddd"></textarea>
</div>
<div class="mycar">
<label for="mycar">我的car：</label>
<select name="mycar" id="mycar">
<option value="0">薩博</option>
<option value="1">法拉利</option>
<option value="2">保時捷</option>
</select>
<input type="submit" value="提交">
</div>
</form>
</div>
</body>
</html>
效果圖如下：
