一.form表單有什么作用盔夜？有哪些常用的input 標(biāo)簽膀曾，分別有什么作用叁熔？
- Form表單的作用是：收集用戶通過頁面填寫的信息，然后傳給后臺沸移。
- 常見的<input>標(biāo)簽及其作用
首先要注意所有的表單都必須要放到<form></form>中痪伦，否則提交是無效的侄榴。
下面列舉出常見的<input>的type類型：
單行文本輸入框type="text"：
<div class="text">
<label for="username"></label>
<input type="text" name="username" id="username" placeholder="輸入用戶名">
<!--普通的單行文本輸入框-->
</div>
密碼輸入type="password"
<div class="password">
<label for="password"></label>
<input type="password" name="password" id="password" placeholder="輸入密碼">
<!--密碼輸入框，輸入時默認(rèn)是小圓黑點-->
</div>
復(fù)選框type='checkbox'
<div class="checkbox">
<label>喜歡的運動</label>
<input type="checkbox" name="sports" value="basketball">籃球
<input type="checkbox" name="sports" value="baseball">棒球
<input type="checkbox" name="sports" value="football"> 足球
<!--復(fù)選框网沾，使用的時候name要設(shè)置一致表明是一組選項癞蚕。 value的值會根據(jù)用戶填寫選項返回給后臺-->
</div>
單選框type="radio"
<div class="radio">
<label>性別</label>
<input type="radio" name="sex" value="male">man
<input type="radio" name="sex" value="female">woman
<!--單選框，其中name屬性相同的為同一組選項辉哥，value的值會根據(jù)用戶填寫選項返回給后臺-->
</div>
上傳文件 type="file"
<div class="file">
<input type="file" name="myFile" accept="image/gif">
<!--用于上傳文件-->
</div>
隱藏域type="hidden"
<div class="hidden">
<input type="hidden" name="csrf" value="12u31uhuhdsg1dsyu12ghe1">
<!--頁面上用戶看不到的隱藏域桦山，可以用于防止csrf攻擊，通過檢查傳到后臺的value判斷用戶是否合法-->
</div>
下面是提交和重置的type類型
提交
<div class="submit">
<input type="submit" value="submit">
<!--提交-->
</div>
<div class="button">
<button value="提交"></button>
<!--提交-->
</div>
重置
<div class="reset">
<input type="reset" value="reset">
<!--重置已經(jīng)輸入的內(nèi)容-->
</div>
下面介紹其他相關(guān)標(biāo)簽：
下拉選擇框select：
<div class="select">
<select name="sports">
<option value="basketball">籃球</option>
<option value="baseball">棒球</option>
<option value="football" selected>足球</option>
</select>
<!--下拉選擇框醋旦，其中<option>的 selected 表示初始默認(rèn)選擇項-->
</div>
多行文本輸入框textarea：
<div class="textarea">
<textarea name="textarea" id="textarea" cols="30" rows="10">
可以輸入多行的文本,而type="text"只允許輸入單行文本
</textarea>
</div>
二.post 和 get 方式的區(qū)別恒水？
在form標(biāo)簽中，一般屬性有action和method饲齐，action表示的是表單提交信息的地址钉凌，而method是表示用何種方式傳遞數(shù)據(jù)，有g(shù)et和post兩種方式捂人，下面比較兩種方式的區(qū)別御雕。
<div class="form">
<form action="/deejay" method="post">
</form>
</div>
get一般用于獲取和查詢數(shù)據(jù)信息，post一般用于更新資源滥搭。
get一般就像數(shù)據(jù)庫查詢一樣饮笛，僅僅獲取資源信息，并不會修改服務(wù)器上的值论熙，post是用于更新資源的福青，可能會修改服務(wù)器上的資源。
- 兩種提交方式的區(qū)別
- get
get請求的數(shù)據(jù)會加到URL之后脓诡，請求多個參數(shù)的時候用&隔開无午，傳輸?shù)臄?shù)據(jù)和URL依靠?分隔開來，例如
[http://www.it315.org/counter.jsp?name=zhangsan&password=123]祝谚。另外url的編碼格式為ASCII碼宪迟，所有的非ASCII字符都需要重新編碼在進(jìn)行傳輸。 - post
用post方式提交數(shù)據(jù)的時候交惯，請求的數(shù)據(jù)是放到HTTP包的包體中的次泽，所以post提交的情況瀏覽器的地址欄不會改變。
- 傳輸數(shù)據(jù)的大小差異
由于上述方式的差異席爽，get方式一般提交的數(shù)據(jù)最多為1kb（1024字節(jié)）意荤，而post沒有限制，可以傳輸較多的數(shù)據(jù)只锻。 - 安全性問題
使用get請求發(fā)送數(shù)據(jù)的時候玖像，你的username和password都會出現(xiàn)在URL上，很容易泄露齐饮，并且get請求可以被緩存捐寥。post請求不可以被緩存笤昨，相比之下post安全性要比get的安全性高。
所以要滿足get是向服務(wù)器發(fā)送索取數(shù)據(jù)的一種請求握恳，post是向服務(wù)器提交數(shù)據(jù)的一種請求這一條件瞒窒。
三.在input里，name 有什么作用乡洼？
在input標(biāo)簽中崇裁，name屬性表示的是input元素的名稱，只有設(shè)置了name屬性的表單元素才能成功傳遞他們的值就珠。另外在單選框中寇壳，name屬性還起到分組的作用醒颖。
四.radio 如何 分組?
在
<input type="radio"name="sex1" value="man">男
<input type="radio" name="sex1" value="woman">女
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
中妻怎，通過設(shè)置name的值來確定分組，name屬性的值相同的為同一組泞歉，同一組的只允許單選逼侦。
五.placeholder 屬性有什么作用?
<div class="text">
<input type="text" name="username" placeholder="請輸入用戶名">
</div>
運行效果為
placeholder效果
,會給用戶一個提示內(nèi)容引導(dǎo)用戶輸入數(shù)據(jù)。
六.type=hidden隱藏域有什么作用? 舉例說明
<input type="hidden">稱作表單隱藏域腰耙，對于用戶來說是不可見的榛丢。用來傳遞參數(shù)和一些特殊的功能⊥ε樱可以暫時存儲網(wǎng)站安全的信息以及一些其他數(shù)據(jù)晰赞。
隱藏域的優(yōu)勢在于支持所有的瀏覽器，在用戶禁用cookie的時候也能使用选侨。
一些具體的應(yīng)用舉例：
- 一般頁面中form中有多個提交按鈕時掖鱼，如果要判斷用戶是通過哪一個按鈕提交，就可以在每一個按鈕上加上一個隱藏域來確定援制。
- 再或者要確定用戶登錄本頁面時間長短戏挡，也可以通過設(shè)置隱藏域。
- 可以防止CSRF攻擊晨仑，請求時褐墅，通過在隱藏域value中存儲一個后臺提供的隨機(jī)數(shù)，來判斷登錄的用戶是否合法洪己。
