一、實(shí)踐
1、貼上完整的代碼圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="login">
<input type="text" name="sex">
<form action="/a123" method="get">
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username1" placeholder="用戶名">
</div>
<div class="password">
<label for="password">密碼</label>
<input id="password" type="password" name="password1">
</div>
<div class="sex">
<label for="sex">性別</label>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<!--
<input type="radio" name="sex1" value="男">男
<input type="radio" name="sex1" value="女">女
-->
</div>
<div class="sexchoose">
<label for="sexchoose">取向</label>
<input type="radio" name="sex2" value="男">男
<input type="radio" name="sex2" value="女">女
</div>
<div class="hobby">
<label>愛(ài)好</label>
<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="travl">旅游
<input type="checkbox" name="hobby" value="pet">寵物
</div>
<div class="textarea">
<label for="textarea">評(píng)論</label>
<textarea name="article">
123
</textarea>
<input type="hidden" name="abcd" value="12345">
</div>
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
<div class="choose">
<label for="pet">我的寵物</label>
<select name="city">
<option value="cat">貓</option>
<option value="dog" selected>狗</option>
<option value="fish">魚(yú)</option>
</select>
<button>提交</button>
<!--
</div>
<div class="submit">
<input type="submit" value="提交">
</div>
-->
<!--
<div class="submit">
<button>提交</button>
</div>
-->
</form>
</div>
</body>
</html>
2、效果圖：
二、具體標(biāo)簽：
1、form
代碼結(jié)構(gòu)如：
<form action="/a123" method="get">
form標(biāo)簽是表單的外殼，有4個(gè)主要屬性：
（1）action：表單提交的地址
（2）method：提交表單的方法
（3）target：在何處打開(kāi)action
（4）enctype：
application／x-www-form-urlencoded：在發(fā)送前編碼所有字符（默認(rèn)）text／plain：空格轉(zhuǎn)換為“+”加號(hào)，但不對(duì)特殊字符編碼multipart／form-data：使用包含文件上傳控件的表單是，必須使用該值
2、type
代碼結(jié)構(gòu)如：
<input type="text" name="sex">
（1）type="text"
普通的文本輸入框，單行輸入（不行回車(chē)換行）?？奢斎胛淖终故?br>
（2）type="password"
輸入密碼是以圓點(diǎn)展示，不被人知道
（3）type="checkbox"
呈現(xiàn)帶有陰影的勾選方框
代碼如下：
<div class="hobby">
<label for="hobby">愛(ài)好</label>
<input type="checkbox" name=>讀書(shū)
<input type="checkbox" name=>聽(tīng)歌
<input type="checkbox" name=>游泳
</div>
如圖：
注：
A、如果是分組，name寫(xiě)成不同，表示多選，如針對(duì)hobby這個(gè)關(guān)鍵字的搜索，value值需要設(shè)置，否則后臺(tái)提交的用戶信息將顯示為on（無(wú)信息展示）。如圖：
B、value的作用：讓后臺(tái)來(lái)識(shí)別該字段的信息
（4）type="radio"
呈現(xiàn)帶有陰影的點(diǎn)選圓框
代碼結(jié)構(gòu)如下：
<div class="hobby">
<label for="sex">性別</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</div>
如圖：
注：
radio 如何分組？舉例說(shuō)明，只需要在<input type="radio" name="sex" value="男">中的name值設(shè)置另一個(gè)意義值，就可以分組顯示，如：
第1組：
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
第2組：
<input type="radio" name="sex1" value="男">男
<input type="radio" name="sex1" value="女">女
即：
<div class="hobby">
<label for="sex">性別</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex1" value="男">男
<input type="radio" name="sex1" value="女">女
</div>
如圖：
（5）type="file"
用于文件上傳，呈現(xiàn)“選擇文件”按鈕，點(diǎn)擊即可上傳文件
<input type="file" name="myfile" accept="image/png，image/jp
注： accept該參數(shù)使用，即用于接收所限制的文件格式
（6）type="hidden"
作用：
-
暫存信息。 如在
type="hidden"埋下一個(gè)值，后臺(tái)定位獲取相應(yīng)的值，可安全存值，用戶什么都看不見(jiàn)，只能在后臺(tái)看到； -
保障安全。 當(dāng)打開(kāi)一個(gè)頁(yè)面，實(shí)際上該頁(yè)面是后端寫(xiě)的模板并在里面填充數(shù)據(jù)，填充好數(shù)據(jù)后，安全策略時(shí)使用
type="hidden"，即：
<input type="hidden" name="abc" value="123456">
當(dāng)用戶提交用戶信息至后臺(tái)，同時(shí)該安全點(diǎn)type="hidden"的值也會(huì)提交后臺(tái)，后臺(tái)進(jìn)行校驗(yàn)——確認(rèn)過(guò)安全，相當(dāng)于埋在后臺(tái)與用戶信息相匹配的一個(gè)安全校驗(yàn)值，即該用戶為一個(gè)合法用戶。
（7）type="button"，不能點(diǎn)擊提交
（8）type="submit"，可以點(diǎn)擊提交
（9）type="reset"，用于清空所有用戶信息
注：
A、以下input有何作用？
<input type="submit" value="提交" name="提交按鈕">
B、type="submit" ，
提示input作用為“提交”按鈕
C、value="提交"，
顯示提交作用，意義在于“點(diǎn)擊提交”的交互作用
D、input里name 作用？
即用于傳遞數(shù)據(jù)給后臺(tái)都形成有意義的識(shí)別值，如用value和name賦值，如果不寫(xiě)的話，該輸入標(biāo)簽將不會(huì)有任何意義，就等于無(wú)實(shí)際操作表單的意義。
3、type=hidden 隱藏域作用
type=hidden隱藏域，作為校驗(yàn)該用戶信息的一個(gè)隱藏值（判斷標(biāo)準(zhǔn)）。當(dāng)用戶打開(kāi)頁(yè)面后是看不見(jiàn)type=hidden相應(yīng)的值，填寫(xiě)用戶信息之后點(diǎn)擊提交時(shí)，用戶信息的數(shù)據(jù)（包括type=hidden值）隨即提交后臺(tái)，打開(kāi)后臺(tái)則會(huì)展示代碼type=hidden所寫(xiě)的相應(yīng)元素屬性值。后臺(tái)校驗(yàn)type=hidden相應(yīng)值如果是正確，即用戶提交為安全。
埋點(diǎn)（保護(hù)的參數(shù)）——瀏覽器提交后臺(tái)有該參數(shù)作為校驗(yàn)標(biāo)準(zhǔn)參考——若顯示錯(cuò)值或無(wú)值，服務(wù)器也將不承認(rèn)所提交的數(shù)據(jù)；若為正確值，則說(shuō)明該用戶獲取權(quán)限，即為合法用戶，可防止CSRF攻擊
4、label
輸入框前的文字標(biāo)注
代碼如下：
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username1">
</div>
注： for，用于點(diǎn)擊文字或輸入框時(shí)，是文字顯示一種focus狀態(tài)，可直接輸入對(duì)應(yīng)信息
5、select
下拉菜單
代碼結(jié)構(gòu)如下：
<div class="choose">
<select name="city">
<label for="pet">我的寵物</label>
<option value="cat">貓</option>
<option value="dog">狗</option>
<option value="fish">魚(yú)</option>
</select>
</div>
option中，設(shè)置默認(rèn)選擇的初始值，即<option value="cat" selected>貓</option>
6、textarea
實(shí)現(xiàn)多行文本，展示較大的輸入框。即常見(jiàn)的評(píng)論框。
代碼結(jié)構(gòu)如下：
<div class="textarea">
<label for="textarea">評(píng)論</label>
<textarea name="article">
123
</textarea>
</div>
注：
若在<textarea>...</textarea>中輸入任意值，即相當(dāng)于value賦值的意義，也就是說(shuō)在<textarea>...</textarea>輸入的值都能顯示其輸出的意義。
7、placeholder
用于輸入什么用戶信息的提示
代碼結(jié)構(gòu)如下：
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username1" placeholder="用戶名">
</div>
圖：
