HTML之表單
阿新 • • 發佈：2018-11-09
表單：
表單是一個包含表單元素的區域。
表單元素是允許使用者在表單中輸入內容,比如：文字域(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>