表單： 表單是一個包含表單元素的區域。 表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、覆選框(checkboxes)等等。 表單使用表單標簽 <form> 來設置: 輸入元素 多數情況下被用到的表單標簽是輸入標簽（<input> ...
表單：
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、覆選框(checkboxes)等等。
表單使用表單標簽 <form> 來設置:
<form> . input 元素 . </form>
表單標簽：
| 標簽 | 描述 |
|---|---|
| <form> | 定義供用戶輸入的表單 |
| <input> | 定義輸入域 |
| <textarea> | 定義文本域 (一個多行的輸入控制項) |
| <label> | 定義了 <input> 元素的標簽，一般為輸入標題 |
| <fieldset> | 定義了一組相關的表單元素，並使用外框包含起來 |
| <legend> | 定義了 <fieldset> 元素的標題 |
| <select> | 定義了下拉選項列表 |
| <optgroup> | 定義選項組 |
| <option> | 定義下拉列表中的選項 |
| <button> | 定義一個點擊按鈕 |
| <datalist>New | 指定一個預先定義的輸入控制項選項列表 |
| <keygen>New | 定義了表單的密鑰對生成器欄位 |
| <output>New | 定義一個計算結果 |
輸入元素
多數情況下被用到的表單標簽是輸入標簽（<input>）。輸入類型是由類型屬性（type）定義的。
文本域（Text Fields）
文本域通過<input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
註意：文本域的預設寬度是20個字元。
密碼欄位
密碼欄位通過標簽<input type="password"> 來定義:
<form> Password: <input type="password" name="pwd"> </form>
註意：密碼欄位字元不會明文顯示，而是以星號或圓點替代。
單選按鈕（Radio Buttons）
<input type="radio"> 標簽定義了表單單選框選項
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
覆選框（Checkboxes）
<input type="checkbox"> 定義了覆選框. 用戶需要從若幹給定的選擇中選取一個或若幹選項。
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
提交按鈕(Submit Button)
<input type="submit"> 定義了提交按鈕.
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
簡單的下拉列表
<body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body>
預選下拉列表
<body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form> </body>
文本域
<body> <textarea rows="10" cols="30"> 我是一個文本框。 </textarea> </body>
帶有覆選框的表單：
<body> <form action="demo-form.php" method="get"> <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br> <input type="submit" value="提交"> </form> </body>
帶有單選按鈕的表單：
<body> <form action="demo-form.php" method="get"> <input type="radio" name="sex" value="Male"> Male<br> <input type="radio" name="sex" value="Female" checked="checked"> Female<br> <input type="submit" value="提交"> </form> </body>
從表單發送電子郵件：
<body> <h3>發送郵件到 [email protected]:</h3> <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> E-mail:<br> <input type="text" name="mail" value="your email"><br> Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="發送"> <input type="reset" value="重置"> </form> </body>
重置按鈕
<input type="reset">定義重置按鈕
<input type="reset" name="button" id="button" value="重置">
點擊之後會將重置按鈕所在的表單中填寫的內容重新設置為預設值。
<body> <form action="demo-form.php"> Email: <input type="text" name="email"><br> Pin: <input type="text" name="pin" maxlength="4"><br> <input type="reset" value="重置"> <input type="submit" value="提交"> </form> <p>點擊重置按鈕重新設置表單。</p> </body>
