HTML 表單和輸入 · W3School HTML & CSS 教程

# HTML 表單和輸入 **HTML 表單用于搜集不同類型的用戶輸入。** ## 實例 [文本域 (Text field)](/tiy/t.asp?f=html_inputfields) ``` <html> <body> <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastname"> </form> </body> </html> ``` [密碼域](/tiy/t.asp?f=html_passwordfields) ``` <html> <body> <form> 用戶： <input type="text" name="user"> <br /> 密碼： <input type="password" name="password"> </form> <p> 請注意，當您在密碼域中鍵入字符時，瀏覽器將使用項目符號來代替這些字符。 </p> </body> </html> ``` （[可以在本頁底端找到更多實例](#more_examples)。） ## 表單表單是一個包含表單元素的區域。表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復選框等等）輸入信息的元素。表單使用表單標簽（<form>）定義。 ``` <form> ... input 元素 ... </form> ``` ## 輸入多數情況下被用到的表單標簽是輸入標簽（<input>）。輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下： ### 文本域（Text Fields）當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。 ``` <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form> ``` 瀏覽器顯示如下： <form action="" style="margin:10px 0 0 0;">First name: <input type="text" name="firstname" size="20"> Last name: <input type="text" name="lastname" size="20"></form> 注意，表單本身并不可見。同時，在大多數瀏覽器中，文本域的缺省寬度是20個字符。 ### 單選按鈕（Radio Buttons）當用戶從若干給定的的選擇中選取其一時，就會用到單選框。 ``` <form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form> ``` 瀏覽器顯示如下： <form action="" style="margin:10px 0 0 0;"><input type="radio" name="sex" value="male"> Male <input type="radio" name="sex" value="female"> Female</form> 注意，只能從中選取其一。 ### 復選框（Checkboxes）當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到復選框。 ``` <form> <input type="checkbox" name="bike" /> I have a bike <br /> <input type="checkbox" name="car" /> I have a car </form> ``` 瀏覽器顯示如下： <form action="" style="margin:10px 0 0 0;"><input type="checkbox" name="bike" value="ON"> I have a bike <input type="checkbox" name="car" value="ON"> I have a car</form> ## 表單的動作屬性（Action）和確認按鈕當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。 ``` <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> ``` 瀏覽器顯示如下： <form name="input" action="html_form_action.asp" method="get" style="margin:10px 0 0 0;">Username: <input type="text" name="user" size="20"> <input type="submit" value="Submit"></form> 假如您在上面的文本框內鍵入幾個字母，然后點擊確認按鈕，那么輸入數據會傳送到 "html_form_action.asp" 的頁面。該頁面將顯示出輸入的結果。 ## 更多實例 [復選框](/tiy/t.asp?f=html_checkboxes) ``` <html> <body> <form> 我喜歡自行車： <input type="checkbox" name="Bike"> <br /> 我喜歡汽車： <input type="checkbox" name="Car"> </form> </body> </html> ``` [單選按鈕](/tiy/t.asp?f=html_radiobuttons) ``` <html> <body> <form> 男性： <input type="radio" checked="checked" name="Sex" value="male" /> <br /> 女性： <input type="radio" name="Sex" value="female" /> </form> <p>當用戶點擊一個單選按鈕時，該按鈕會變為選中狀態，其他所有按鈕會變為非選中狀態。</p> </body> </html> ``` [簡單的下拉列表](/tiy/t.asp?f=html_dropdownbox) ``` <html> <body> <form> <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> </html> ``` [另一個下拉列表](/tiy/t.asp?f=html_dropdownbox2) ``` <html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> ``` [文本域(Textarea)](/tiy/t.asp?f=html_textarea) ``` <html> <body> <p> This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. </p> <textarea rows="10" cols="30"> The cat was playing in the garden. ``` [創建按鈕](/tiy/t.asp?f=html_button) ``` <html> <body> <form> <input type="button" value="Hello world!"> </form> </body> </html> ``` [Fieldset around data](/tiy/t.asp?f=html_fieldset) ``` <!DOCTYPE HTML> <html> <body> <form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 體重：<input type="text" /> </fieldset> </form> <p>如果表單周圍沒有邊框，說明您的瀏覽器太老了。</p> </body> </html> ``` ### 表單實例 [帶有輸入框和確認按鈕的表單](/tiy/t.asp?f=html_form_submit) ``` <html> <body> <form action="/example/html/form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /> </form> <p>請單擊確認按鈕，輸入會發送到服務器上名為 "form_action.asp" 的頁面。</p> </body> </html> ``` [帶有復選框的表單](/tiy/t.asp?f=html_form_checkbox) ``` <html> <body> <form name="input" action="/html/html_form_action.asp" method="get"> I have a bike: <input type="checkbox" name="vehicle" value="Bike" checked="checked" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> <br /><br /> <input type="submit" value="Submit" /> </form> <p>如果您點擊 "Submit" 按鈕，您將把輸入傳送到名為 html_form_action.asp 的新頁面。</p> </body> </html> ``` [帶有單選按鈕的表單](/tiy/t.asp?f=html_form_radio) ``` <html> <body> <form name="input" action="/html/html_form_action.asp" method="get"> Male: <input type="radio" name="Sex" value="Male" checked="checked"> <br /> Female: <input type="radio" name="Sex" value="Female"> <br /> <input type ="submit" value ="Submit"> </form> <p>如果您點擊 "Submit" 按鈕，您將把輸入傳送到名為 html_form_action.asp 的新頁面。</p> </body> </html> ``` [從表單發送電子郵件](/tiy/t.asp?f=html_form_mail) ``` <html> <body> <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain"> <h3>這個表單會把電子郵件發送到 W3School。</h3> 姓名：<br /> <input type="text" name="name" value="yourname" size="20"> <br /> 電郵：<br /> <input type="text" name="mail" value="yourmail" size="20"> <br /> 內容：<br /> <input type="text" name="comment" value="yourcomment" size="40"> <br /><br /> <input type="submit" value="發送"> <input type="reset" value="重置"> </form> </body> </html> ``` ## 表單標簽 | 標簽 | 描述 | | --- | --- | | [`<form>`](/tags/tag_form.asp) | 定義供用戶輸入的表單 | | [`<input>`](/tags/tag_input.asp) | 定義輸入域 | | [`<textarea>`](/tags/tag_textarea.asp) | 定義文本域 (一個多行的輸入控件) | | [`<label>`](/tags/tag_label.asp) | 定義一個控制的標簽 | | [`<fieldset>`](/tags/tag_fieldset.asp) | 定義域 | | [`<legend>`](/tags/tag_legend.asp) | 定義域的標題 | | [`<select>`](/tags/tag_select.asp) | 定義一個選擇列表 | | [`<optgroup>`](/tags/tag_optgroup.asp) | 定義選項組 | | [`<option>`](/tags/tag_option.asp) | 定義下拉列表中的選項 | | [`<button>`](/tags/tag_button.asp) | 定義一個按鈕 | | `<isindex>` | 已廢棄。由 `<input>` 代替。 |