HTML 表單和輸入
HTML 表單和輸入
HTML 表單用於蒐集不同類型的使用者輸入。
HTML 表單
表單是一個包含表單元素的區域。
表單元素是允許使用者在表單中輸入內容,例如：文字域(textarea)、下拉清單、單選框(radio-buttons)、複選框(checkboxes)等等。
表單使用表單標籤<form> 設定:
<form>
<input type="">
#< input type="">
</form>
HTML 表單- 輸入元素
多數情況下被用到的表單標籤是輸入標籤（<input>）。
輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：
文字域（Text Fields）
#文字域透過<input type="text"> 標籤來設定，當使用者要在表單中鍵入字母、數字等內容時，就會用到文字域。
<form> 姓名: <input type="text" name="name"><br> 年龄: <input type="text" name="old"> </form>
注意:表單本身不可見。同時，在大多數瀏覽器中，文字域的缺省寬度是20個字元。
密碼欄位透過標籤<input type="password"> 來定義:
<form> 密码: <input type="password" name="pwd"> </form>
注意:密碼欄位字元不會明文顯示，而是以星號或圓點取代。
單選按鈕（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项 <form> <input type="radio" name="sex" value="male">男 <br> <input type="radio" name="sex" value="female">女 </form>
複選框（Checkboxes）
<input type="checkbox"> 定義了複選框. 使用者需要從若干給定的選擇中選取一個或若干選項。
<form> <input type="checkbox" name="hobby" value="LOL">我喜欢玩LOL <br> <input type="checkbox" name="hobby" value="CF">我喜欢玩CF </form>
提交按鈕(Submit Button)
<input type="submit "> 定義了提交按鈕.
當使用者點選確認按鈕時，表單的內容會傳送到另一個檔案。表單的動作屬性定義了目的檔案的檔案名稱。由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理。 :
<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>
將上面的內容綜合起來：
<!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/> 我的家乡： <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>
