HTML 表單

HTML 表單用於收集不同型別的使用者輸入。


Examples

線上例項

建立文字欄位 (Text field)
本例演示如何在 HTML 頁面建立文字域。使用者可以在文字域中寫入文字。

建立密碼欄位
本例演示如何建立 HTML 的密碼域。

(在本頁底端可以找到更多例項。)


HTML 表單

表單是一個包含表單元素的區域。

表單元素是允許使用者在表單中輸入內容,比如:文字域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。

表單使用表單標籤 <form> 來設定:

<form>
.
input 元素
.
</form>


HTML 表單 - 輸入元素

多數情況下被用到的表單標籤是輸入標籤(<input>)。

輸入型別是由型別屬性(type)定義的。大多數經常被用到的輸入型別如下:


文字域(Text Fields)

文字域通過<input type="text"> 標籤來設定,當用戶要在表單中鍵入字母、數字等內容時,就會用到文字域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

瀏覽器顯示如下:

First name:
Last name:

注意:表單本身並不可見。同時,在大多數瀏覽器中,文字域的預設寬度是 20 個字元。


密碼欄位

密碼欄位通過標籤<input type="password"> 來定義:

<form>
Password: <input type="password" name="pwd">
</form>

瀏覽器顯示效果如下:

Password:

注意:密碼欄位字元不會明文顯示,而是以星號或圓點替代。


單選按鈕(Radio Buttons)

<input type="radio"> 標籤定義了表單單選框選項

<form>
<input type="radio" name="sex" value="https://www.itread01.com/html/male">Male<br>
<input type="radio" name="sex" value="https://www.itread01.com/html/female">Female
</form>

瀏覽器顯示效果如下:

Male
Female

複選框(Checkboxes)

<input type="checkbox"> 定義了複選框. 使用者需要從若干給定的選擇中選取一個或若干選項。

<form>
<input type="checkbox" name="vehicle" value="https://www.itread01.com/html/Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="https://www.itread01.com/html/Car">I have a car
</form>

瀏覽器顯示效果如下:

I have a bike
I have a car

提交按鈕(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="https://www.itread01.com/html/Submit">
</form>

瀏覽器顯示效果如下:

Username:

假如您在上面的文字框內鍵入幾個字母,然後點選確認按鈕,那麼輸入資料會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。


Try it 更多例項

單選按鈕(Radio buttons)
本例演示如何在 HTML 中建立單選按鈕。

複選框(Checkboxes)
本例演示如何在 HTML 頁中建立複選框。使用者可以選中或取消選取複選框。

簡單的下拉列表
本例演示如何在 HTML 頁面中建立簡單的下拉列表框。下拉列表框是一個可選列表。

預選下拉列表
本例演示如何建立一個簡單的帶有預選值的下拉列表。

文字域(Textarea)
本例演示如何建立文字域(多行文字輸入控制元件)。使用者可在文字域中寫入文字。可寫入字元的字數不受限制。

建立按鈕
本例演示如何建立按鈕。你可以對按鈕上的文字進行自定義。

Try it 表單例項

帶邊框的表單
本例演示如何在資料周圍繪製一個帶標題的框。

帶有輸入框和確認按鈕的表單
本例演示如何向頁面新增表單。此表單包含兩個輸入框和一個確認按鈕。

帶有複選框的表單
此表單包含兩個複選框和一個確認按鈕。

帶有單選按鈕的表單
此表單包含兩個單選框和一個確認按鈕。

從表單傳送電子郵件
此例演示如何從表單傳送電子郵件。


HTML 表單標籤

New : HTML5新標籤

標籤 描述
<form> 定義供使用者輸入的表單
<input> 定義輸入域
<textarea> 定義文字域 (一個多行的輸入控制元件)
<label> 定義了 <input> 元素的標籤,一般為輸入標題
<fieldset> 定義了一組相關的表單元素,並使用外框包含起來
<legend> 定義了 <fieldset> 元素的標題
<select> 定義了下拉選項列表
<optgroup> 定義選項組
<option> 定義下拉列表中的選項
<button> 定義一個點選按鈕
<datalist>New 指定一個預先定義的輸入控制元件選項列表
<keygen>New 定義了表單的金鑰對生成器欄位
<output>New 定義一個計算結果