HTML 表單元素
本章介紹所有不同的 HTML 表單元素。
HTML <form> 元素
HTML <form> 元素可以包含一個或多個以下表單元素
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
<input> 元素
最常用的表單元素之一是 <input> 元素。
根據 type 屬性的不同，<input> 元素可以顯示為多種方式。
下一個章節將介紹 type 屬性的所有不同值：HTML 輸入型別。
<label> 元素
<label> 元素為多個表單元素定義了一個標籤。
<label> 元素對螢幕閱讀器使用者很有用，因為當用戶聚焦於輸入元素時，螢幕閱讀器會大聲朗讀標籤。
<label> 元素也有助於那些點選非常小區域（例如單選按鈕或複選框）有困難的使用者 - 因為當用戶點選 <label> 元素內的文字時，它會切換單選按鈕/複選框。
<label> 標籤的 for 屬性應與 <input> 元素的 id 屬性相等，以便將它們繫結在一起。
<select> 元素
<select> 元素定義了一個下拉列表
示例
<label for="cars">選擇一輛車：</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">菲亞特</option>
<option value="audi">Audi</option>
</select>
自己動手試一試 »
<option> 元素定義了一個可以選擇的選項。
預設情況下，下拉列表中的第一項被選中。
要定義一個預先選中的選項，請在選項中新增 selected 屬性
可見值
使用 size 屬性來指定可見值的數量
示例
<label for="cars">選擇一輛車：</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">菲亞特</option>
<option value="audi">Audi</option>
</select>
自己動手試一試 »
允許多選
使用 multiple 屬性允許使用者選擇多個值
示例
<label for="cars">選擇一輛車：</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">菲亞特</option>
<option value="audi">Audi</option>
</select>
自己動手試一試 »
<textarea> 元素
<textarea> 元素定義了一個多行輸入欄位（文字區域）
rows 屬性指定文字區域中可見的行數。
cols 屬性指定文字區域的可見寬度。
以上 HTML 程式碼在瀏覽器中的顯示效果如下
您也可以使用 CSS 定義文字區域的大小
<button> 元素
<button> 元素定義了一個可點選的按鈕
以上 HTML 程式碼在瀏覽器中的顯示效果如下
注意： 始終為 button 元素指定 type 屬性。不同的瀏覽器可能為 button 元素使用不同的預設型別。
<fieldset> 和 <legend> 元素
<fieldset> 元素用於在表單中對相關資料進行分組。
<legend> 元素為 <fieldset> 元素定義了一個標題。
示例
<form action="/action_page.php">
<fieldset>
<legend>個人資訊：</legend>
<label for="fname">名字：</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">姓：</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="提交">
</fieldset>
</form>
自己動手試一試 »
以上 HTML 程式碼在瀏覽器中的顯示效果如下
<datalist> 元素
<datalist> 元素為 <input> 元素指定了一系列預定義選項。
當用戶輸入資料時，他們會看到一個預定義選項的下拉列表。
<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。
示例
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
自己動手試一試 »
<output> 元素
<output> 元素表示計算結果（例如指令碼執行的計算）。
示例
執行計算並將結果顯示在 <output> 元素中
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
自己動手試一試 »
HTML 表單元素
| 標籤 | 描述 |
|---|---|
| <form> | 定義一個用於使用者輸入的 HTML 表單 |
| <input> | 定義一個輸入控制元件 |
| <textarea> | 定義多行輸入控制元件（文字區域） |
| <label> | 定義 <input> 元素的標籤 |
| <fieldset> | 對錶單中的相關元素進行分組 |
| <legend> | 定義 <fieldset> 元素的標題 |
| <select> | 定義一個下拉列表 |
| <optgroup> | 定義下拉列表中的一組相關選項 |
| <option> | 定義下拉列表中的一個選項 |
| <button> | 定義一個可單擊按鈕 |
| <datalist> | 指定輸入控制元件預定義選項的列表 |
| <output> | 定義計算結果 |
有關所有可用 HTML 標籤的完整列表，請訪問我們的 HTML 標籤參考。
