淺談HTML表單（二）：表單元素

05-15

貼上完整的代碼圖：

<!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="女">女  </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>愛好</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">評論</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">魚</option> </select> <button>提交</button>   </form> </div></body></html>

效果圖：

具體標籤：

1、form

代碼結構如：

<form action="/a123" method="get">

form標籤是表單的外殼，有4個主要屬性：

（1）action：表單提交的地址

（2）method：提交表單的方法

（3）target：在何處打開action

（4）enctype：

application／x-www-form-urlencoded：在發送前編碼所有字元（默認）
text／plain：空格轉換為「+」加號，但不對特殊字元編碼
multipart／form-data：使用包含文件上傳控制項的表單是，必須使用該值

2、type

代碼結構如：

<input type="text" name="sex">

（1）type="text"

普通的文本輸入框，單行輸入（不行回車換行）。可輸入文字展示

（2）type="password"

輸入密碼是以圓點展示，不被人知道

（3）type="checkbox"

呈現帶有陰影的勾選方框

代碼如下：

<div class="hobby"> <label for="hobby">愛好</label> <input type="checkbox" name=>讀書 <input type="checkbox" name=>聽歌 <input type="checkbox" name=>游泳 </div>

如圖：

註：A、如果是分組，name寫成不同，表示多選，如針對hobby這個關鍵字的搜索，value值需要設置，否則後台提交的用戶信息將顯示為on（無信息展示）。

B、value的作用：讓後台來識別該欄位的信息

（4）type="radio"

呈現帶有陰影的點選圓框

代碼結構如下：

<div class="hobby"> <label for="sex">性別</label> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 </div>

如圖：

註：radio 如何分組？舉例說明，只需要在<input type="radio" name="sex" value="男">中的name值設置另一個意義值，就可以分組顯示

如第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"

用於文件上傳，呈現「選擇文件」按鈕，點擊即可上床文件

<input type="file" name="myfile" accept="image/png，image/jp

註：accept該參數使用，即用於接收所限制的文件格式

（6）type="hidden"

作用：暫存信息。如在type="hidden"埋下一個值，後台定位獲取相應的值，可安全存值，用戶什麼都看不見，只能在後台看到；

保障安全。當打開一個頁面，實際上該頁面是後端寫的模板並在裡面填充數據，填充好數據後，安全策略時使用type="hidden"，即：

<input type="hidden" name="abc" value="123456">

當用戶提交用戶信息至後台，同時該安全點type="hidden"的值也會提交後台，後台進行校驗——確認過安全，相當於埋在後台與用戶信息相匹配的一個安全校驗值，即該用戶為一個合法用戶。

（7）type="button"，不能點擊提交

（8）type="submit"，可以點擊提交

（9）type="reset"，用於清空所有用戶信息

註：A、以下input有何作用？

<input type="submit" value="提交" name="提交按鈕">

B、type="submit" ，提示input作用為「提交」按鈕

C、value="提交"，顯示提交作用，意義在於「點擊提交」的交互作用

D、input里name 作用？即用於傳遞數據給後台都形成有意義的識別值，如用value和name賦值，如果不寫的話，該輸入標籤將不會有任何意義，就等於無實際操作表單的意義。

3、type=hidden隱藏域作用

type=hidden隱藏域，作為校驗該用戶信息的一個隱藏值（判斷標準）。當用戶打開頁面後是看不見type=hidden相應的值，填寫用戶信息之後點擊提交時，用戶信息的數據（包括type=hidden值）隨即提交後台，打開後台則會展示代碼type=hidden所寫的相應元素屬性值。後台校驗type=hidden相應值如果是正確，即用戶提交為安全。

埋點（保護的參數）——瀏覽器提交後台有該參數作為校驗標準參考——若顯示錯值或無值，伺服器也將不承認所提交的數據；若為正確值，則說明該用戶獲取許可權，即為合法用戶，可防止CSRF攻擊

4、label

輸入框前的文字標註

代碼如下：

<div class="username"> <label for="username">姓名</label> <input id="username" type="text" name="username1"></div>

註：for，用於點擊文字或輸入框時，是文字顯示一種focus狀態，可直接輸入對應信息

5、select

下拉菜單

代碼結構如下：

<div class="choose"> <select name="city"> <label for="pet">我的寵物</label> <option value="cat">貓</option> <option value="dog">狗</option> <option value="fish">魚</option> </select> </div>

option中，設置默認選擇的初始值，即<option value="cat" selected>貓</option>

6、textarea

實現多行文本，展示較大的輸入框。即常見的評論框。

代碼結構如下：

<div class="textarea"> <label for="textarea">評論</label> <textarea name="article"> 123 </textarea></div>

註：若在<textarea>。。。</textarea>中輸入任意值，即相當於value賦值的意義，也就是說在<textarea>。。。</textarea>輸入的值都能顯示其輸出的意義。

7、placeholder

用於輸入什麼用戶信息的提示

代碼結構如下：

<div class="username"> <label for="username">姓名</label> <input id="username" type="text" name="username1" placeholder="用戶名"> </div>

效果圖：