HTML 表單
HTML 表單用於收集使用者輸入。使用者輸入通常會被髮送到伺服器進行處理。
The <form> Element
HTML <form> 元素用於建立用於使用者輸入的 HTML 表單。
<form>
.
表單元素
.
</form>
The <form> 元素是一個包含不同型別輸入元素的容器，例如：文字欄位、複選框、單選按鈕、提交按鈕等。
本章涵蓋了所有不同的表單元素：HTML 表單元素。
The <input> Element
HTML <input> 元素是最常用的表單元素。
根據 type 屬性的不同，<input> 元素可以顯示為多種樣式。
以下是一些示例
| 型別 | 描述 |
|---|---|
| <input type="text"> | 顯示一個單行文字輸入欄位 |
| <input type="radio"> | 顯示一個單選按鈕（用於從多個選項中選擇一個） |
| <input type="checkbox"> | 顯示一個複選框（用於從多個選項中選擇零個或多個） |
| <input type="submit"> | 顯示一個提交按鈕（用於提交表單） |
| <input type="button"> | 顯示一個可點選的按鈕 |
本章涵蓋了所有不同的輸入型別：HTML 輸入型別。
文字欄位
The <input type="text"> 定義了一個用於文字輸入的單行輸入欄位。
示例
一個帶有文字輸入欄位的表單
<form>
<label for="fname">名:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname">
</form>
自己動手試一試 »
以上 HTML 程式碼在瀏覽器中的顯示效果如下
注意：表單本身不可見。另請注意，輸入欄位的預設寬度為 20 個字元。
The <label> Element
注意到上面示例中使用了 <label> 元素。
The <label> 標籤為許多表單元素定義了一個標籤。
The <label> 元素對螢幕閱讀器使用者很有用，因為當用戶聚焦在輸入元素上時，螢幕閱讀器會大聲朗讀標籤。
The <label> 元素還有助於那些難以點選非常小的區域（如單選按鈕或複選框）的使用者——因為當用戶點選 <label> 元素內的文字時，它會切換單選按鈕/複選框。
The <label> 標籤的 for 屬性應等於 <input> 元素的 id 屬性，以將它們繫結在一起。
單選按鈕
The <input type="radio"> 定義了一個單選按鈕。
單選按鈕允許使用者選擇有限選項中的 ONE。
示例
帶有單選按鈕的表單
<p>選擇您最喜歡的 Web 語言：</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
自己動手試一試 »
以上 HTML 程式碼在瀏覽器中的顯示效果如下
選擇您最喜歡的 Web 語言
複選框
The <input type="checkbox"> 定義了一個複選框。
複選框允許使用者選擇有限選項中的 ZERO 個或多個選項。
示例
帶有複選框的表單
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> 我有一輛腳踏車</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> 我有一輛汽車</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> 我有一艘船</label>
</form>
自己動手試一試 »
以上 HTML 程式碼在瀏覽器中的顯示效果如下
The Submit Button
The <input type="submit"> 定義了一個用於將表單資料提交到表單處理程式的按鈕。
表單處理程式通常是伺服器上帶有用於處理輸入資料的指令碼的檔案。
表單處理程式在表單的 action 屬性中指定。
示例
帶有提交按鈕的表單
<form action="/action_page.php">
<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="提交">
</form>
自己動手試一試 »
以上 HTML 程式碼在瀏覽器中的顯示效果如下
The Name Attribute for <input>
請注意，每個輸入欄位都必須有一個 name 屬性才能被提交。
如果省略 name 屬性，則不會發送輸入欄位的值。
示例
此示例不會提交“名字”輸入欄位的值：
<form action="/action_page.php">
<label for="fname">名:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="提交">
</form>
自己動手試一試 »
影片：HTML 表單
