HTML 表單和輸入
HTML?表單和輸入
HTML 表單用於蒐集不同類型的使用者輸入。
HTML 表單
表單是一個(gè)包含表單元素的區(qū)域。
表單元素是允許使用者在表單中輸入內(nèi)容,例如：文字域(textarea)、下拉清單、單選框(radio-buttons)、複選框(checkboxes)等等。
表單使用表單標(biāo)籤<form> 設(shè)定:
<form>
<input type="">
#< input type="">
</form>
HTML 表單- 輸入元素
多數(shù)情況下被用到的表單標(biāo)籤是輸入標(biāo)籤（<input>）。
輸入類型是由類型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下：
文字域（Text Fields）
#文字域透過(guò)<input type="text"> 標(biāo)籤來(lái)設(shè)定，當(dāng)使用者要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文字域。
<form> 姓名: <input type="text" name="name"><br> 年齡: <input type="text" name="old"> </form>
注意:表單本身不可見(jiàn)。同時(shí)，在大多數(shù)瀏覽器中，文字域的缺省寬度是20個(gè)字元。
密碼欄位透過(guò)標(biāo)籤<input type="password"> 來(lái)定義:
<form> 密碼: <input type="password" name="pwd"> </form>
注意:密碼欄位字元不會(huì)明文顯示，而是以星號(hào)或圓點(diǎn)取代。
單選按鈕（Radio Buttons）
<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng) <form> <input type="radio" name="sex" value="male">男 <br> <input type="radio" name="sex" value="female">女 </form>
複選框（Checkboxes）
<input?type="checkbox">?定義了複選框.?使用者需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。
<form> <input type="checkbox" name="hobby" value="LOL">我喜歡玩LOL <br> <input type="checkbox" name="hobby" value="CF">我喜歡玩CF </form>
提交按鈕(Submit Button)
<input type="submit "> 定義了提交按鈕.
當(dāng)使用者點(diǎn)選確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)傳送到另一個(gè)檔案。表單的動(dòng)作屬性定義了目的檔案的檔案名稱。由動(dòng)作屬性定義的這個(gè)檔案通常會(huì)對(duì)接收到的輸入資料進(jìn)行相關(guān)的處理。 :
<form name="input" action="html_form_action.php" method="get"> 用戶名: <input type="text" name="user"> 密碼: <input type="password" name="pwd"> <input type="submit" value="Submit"> </form>
將上面的內(nèi)容綜合起來(lái)：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form> 姓名：<input type="text" name="name"><br/><br/> 性別：<input type="text" name="sex"><br/><br/> 年齡：<input type="text" name="old"><br/><br/> <input type="radio" name="sex" value="male">男 <br/><br/> <input type="radio" name="sex" value="female">女 <br/><br/> 我的愛(ài)好： <br/><br/> <input type="checkbox" name="hobby" value="LOL">LOL <br/><br/> <input type="checkbox" name="hobby" value="CF">CF <br/><br/> <input type="checkbox" name="hobby" value="DOTA">DOTA <br/><br/> 我的家鄉(xiāng)： <select> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">廣州</option> <option value="xianggang">香港</option> </select> <br/><br/> 用戶名: <input type="text" name="user"> <br/><br/> 密 碼: <input type="password" name="pwd"> <br/><br/> <input type="submit" value="提交"> </form> </body> </html>
