HTML 表單和輸入
HTML?表單和輸入
HTML 表單用于搜集不同類型的用戶輸入。
HTML 表單
表單是一個包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。
表單使用表單標(biāo)簽 <form> 來設(shè)置:
<form>
<input type="">
<input type="">
</form>
HTML 表單 - 輸入元素
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。
輸入類型是由類型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下：
文本域（Text Fields）
文本域通過<input type="text"> 標(biāo)簽來設(shè)定，當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域。
<form> 姓名: <input type="text" name="name"><br> 年齡: <input type="text" name="old"> </form>
注意:表單本身并不可見。同時，在大多數(shù)瀏覽器中，文本域的缺省寬度是20個字符。
密碼字段通過標(biāo)簽<input type="password"> 來定義:
<form> 密碼: <input type="password" name="pwd"> </form>
注意:密碼字段字符不會明文顯示，而是以星號或圓點(diǎn)替代。
單選按鈕（Radio Buttons）
<input type="radio"> 標(biāo)簽定義了表單單選框選項 <form> <input type="radio" name="sex" value="male">男 <br> <input type="radio" name="sex" value="female">女 </form>
復(fù)選框（Checkboxes）
<input?type="checkbox">?定義了復(fù)選框.?用戶需要從若干給定的選擇中選取一個或若干選項。
<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)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(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)容綜合起來：
<!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/> 我的愛好： <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>
