在網際網路的世界中，表單是使用者與網站進行互動的重要橋樑。無論是註冊新賬號、提交反饋、還是線上購物，表單都扮演著至關重要的角色。在網頁中，我們需要跟使用者進行互動，收集使用者資料，此時就需要用到表單標籤。
HTML提供了一系列的表單標籤，使得開發者能夠輕鬆地建立出功能豐富的表單。今天我們就來深入探討這些標籤，瞭解它們的作用以及如何使用它們來構建一個有效的使用者介面。
一、表單的組成
在HTML中，一個完整的表單通常由表單域、表單控制元件（表單元素）和提示資訊三個部分構成。
表單域
- 表單域是一個包含表單元素的區域
- 在HTML標籤中，
<form>標籤用於定義表單域，以實現使用者資訊的收集和傳遞 <form>會把它範圍內的表單元素資訊提交給伺服器
表單控制元件
這些是使用者與表單交雲的各種元素，如<input>（用於建立不同型別的輸入欄位）、<textarea>（用於多行文字輸入）、<button>（用於提交表單或執行其他操作）、<select>和<option>（用於建立下拉選單）等。
提示資訊
這些資訊通常透過<label>標籤提供，它為表單控制元件提供了描述性文字，有助於提高可訪問性。<label>標籤通常與<input>標籤一起使用，並且可以透過for屬性與<input>標籤的id屬性關聯起來。
這三個部分共同構成了一個完整的HTML表單，使得使用者可以輸入資料，並透過點選提交按鈕將這些資料傳送到Web伺服器進行處理。
二、表單元素
在表單域中可以定義各種表單元素，這些表單元素就是允許使用者在表單中輸入或者選擇的內容控制元件。下面就來介紹HTML中常用的表單元素。
1、<form>標籤：基礎容器
作用：定義一個表單區域，使用者可以在其中輸入資料進行提交。
<form action="submit.php" method="post">
其中action屬性指定了資料提交到的伺服器端指令碼地址，method屬性定義了資料提交的方式（通常為GET或POST）。
2、<input>標籤：資料輸入
<input>標籤是一個單標籤，用於收集使用者資訊。允許使用者輸入文字、數字、密碼等。
<input type="text" name="username" placeholder="請輸入使用者名稱">
type屬性決定了輸入型別，name屬性定義了資料的鍵名，placeholder屬性提供了輸入框內的提示文字。
<input>標籤的屬性
下面舉個例子來說明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
使用者名稱：<input type="text" value="請輸入使用者名稱"><br>
密碼：<input type="password"><br>
性別：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
愛好：吃飯<input type="checkbox"> 睡覺<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免費註冊">
<input type="reset" value="重新填寫">
<input type="button" value="獲取簡訊驗證碼"><br>
上傳頭像：<input type="file">
</form>
</body>
</html>
3、
它與輸入欄位如文字框、單選按鈕、核取方塊等關聯起來，以改善網頁的可用性和可訪問性。<label>標籤有兩種常見的用法：
1）包裹方式：
在這種用法中，<label>標籤直接包裹住關聯的表單元素。例如：
<label>使用者名稱：<input type="text" name="username"></label>
這樣做的好處是使用者點選標籤文字時，關聯的輸入欄位會自動獲取焦點，從而提供更好的使用者體驗。
2）使用for屬性關聯：
在這種用法中，
<label for="username">使用者名稱：</label><input type="text" id="username" name="username">
這樣做的優勢是單擊標籤時，相關的表單元素會自動選中（獲取焦點），從而提高可用性和可訪問性。
4、<select>和<option>標籤：下拉選擇
在頁面中，如果有多個選項讓使用者選擇，並且想要節約頁面空間時，我們可以使用標籤控制元件定義下拉選單。
注意點：
<select>中至少包含一對<option>- 在
<option>中定義selected=“selected”時，當前項即為預設選中項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍貫：
<select>
<option>山東</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>
5、<textarea>標籤：多行文字輸入
當使用者輸入內容較多的情況下，我們可以用表單元素標籤替代文字框標籤。
允許使用者輸入多行文字。
<textarea name="message" rows="5" cols="30">預設文字</textarea>
rows和cols屬性分別定義了文字區域的行數和列數。
程式碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反饋：
<textarea>請在此輸入內容</textarea>
</form>
</body>
</html>
6、<button>標籤：按鈕控制元件
建立一個可點選的按鈕，通常用於提交或重置表單。它允許使用者放置文字或其他內聯元素（如<i>、<b>、<strong>、<br>、<img>等），這使得它比普通的具有更豐富的內容和更強的功能。
<button type="submit">提交</button>
type屬性為submit時表示這是一個提交按鈕。
7、<fieldset>和<legend>標籤：分組和標題
通常用於在HTML表單中對相關元素進行分組，並提供一個標題來描述這個組的內容。
<fieldset>標籤： 該標籤用於在表單中建立一組相關的表單控制元件。它可以將表單元素邏輯分組，並且通常在視覺上透過圍繞這些元素繪製一個邊框來區分不同的組。這種分組有助於提高表單的可讀性和易用性。
<legend>標籤： 它總是與<fieldset>標籤一起使用。<legend>標籤定義了<fieldset>元素的標題，這個標題通常會出現在瀏覽器渲染的欄位集的邊框上方。
程式碼示例：
<form>
<fieldset>
<legend>個人資訊</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>興趣愛好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音樂</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">運動</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">閱讀</label><br>
</fieldset> <input type="submit" value="提交">
</form>
在這個示例中，我們使用了兩個<fieldset>元素來組織表單的不同部分。第一個<fieldset>包含姓名和郵箱欄位，而第二個<fieldset>包含三個核取方塊，用於選擇使用者的興趣愛好。每個<fieldset>都有一個<legend>元素，用於提供標題。這樣，使用者在填寫表單時可以更清晰地瞭解每個部分的內容。
想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合程式碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這裡前往學習哦！
8、<datalist>標籤：預定義選項列表
<datalist>標籤是HTML5中引入的一個新元素，它允許開發者為輸入欄位提供預定義的選項列表。當使用者在輸入欄位中輸入時，瀏覽器會顯示一個下拉選單，其中包含與使用者輸入匹配的預定義選項。
使用<datalist>標籤可以提供更好的使用者體驗，因為它可以幫助使用者選擇正確的選項，而不必手動輸入整個選項。此外，<datalist>還可以與<input>元素的list屬性結合使用，以將預定義的選項列表與特定的輸入欄位關聯起來。
下面是一個使用<datalist>標籤的程式碼示例：
<form>
<label for="color">選擇你喜歡的顏色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="紅色">
<option value="藍色">
<option value="綠色">
<option value="黃色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>
9、<output>標籤：計算結果輸出
<output>標籤是HTML5中引入的一個新元素，它用於顯示計算結果或輸出。該標籤通常與JavaScript程式碼結合使用，透過將計算結果賦值給<output>元素的value屬性來顯示結果。
<output>標籤可以用於各種型別的計算和輸出，例如數學運算、字串處理、陣列操作等。它可以與<input>元素一起使用，以實時更新計算結果。
下面是一個使用<output>標籤的示例：
<form>
<label for="num1">數字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">數字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">結果：</label>
<output id="result"></output>
</form>
<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2; document.getElementById("result").value = result;
}
</script>
10、<progress>標籤：任務進度展示
<progress>標籤是HTML5中用於表示任務完成進度的一個新元素。它透過value屬性和max屬性來表示進度，其中value表示當前完成的值，而max定義任務的總量或最大值。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>
<script>
function startDownload() {
var progress = document.getElementById("fileDownload");
for (var i = 0; i <= 100; i++) {
setTimeout(function() {
progress.value = i;
}, i * 10);
}
}
</script>
</body>
</html>
在上面的示例中，我們建立了一個名為"fileDownload"的<progress>元素，並設定了初始值為0，最大值為100。我們還新增了一個按鈕，當使用者點選該按鈕時，會觸發名為"startDownload"的JavaScript函式。這個函式模擬了一個檔案下載過程，透過迴圈逐步增加<progress>元素的value屬性值，從而顯示下載進度。
11、<meter>標籤：度量衡指示器
<meter>標籤在HTML中用於表示度量衡指示器，它定義了一個已知範圍內的標量測量值或分數值，通常用於顯示磁碟使用情況、查詢結果的相關性等。例如：
<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>記憶體使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>
在這個示例中，我們使用了兩個<meter>標籤來分別顯示CPU和記憶體的使用率。value屬性表示當前的測量值，min和max屬性分別定義了測量範圍的最小值和最大值。透過這些屬性，<meter>標籤能夠清晰地顯示出資源的使用情況。
需要注意的是，<meter>標籤不應該用來表示進度條，對於進度條的表示，應該使用<progress>標籤。
12、<details>和<summary>標籤：詳細資訊展示
<details>和<summary>標籤是HTML5中新增的兩個元素，用於建立可摺疊的詳細資訊區域。
<details>標籤定義了一個可以展開或摺疊的容器，其中包含一些額外的資訊。它通常與<summary>標籤一起使用，<summary>標籤定義了<details>元素的標題，當使用者點選該標題時，<details>元素的內容會展開或摺疊。
示例：
<details>
<summary>點選檢視詳細資訊</summary>
<p>這裡是一些額外的資訊，使用者可以點選標題來展開或摺疊這些資訊。</p>
</details>
在這個示例中，我們使用了<details>標籤來建立一個可摺疊的容器，並在其中新增了一個<summary>標籤作為標題。當使用者點選這個標題時，容器的內容會展開或摺疊。
總結：
HTML表單標籤是構建動態網頁的基石，它們使得使用者能夠與網站進行有效的互動。透過合理地使用這些標籤，開發者可以建立出既美觀又功能強大的表單，從而提升使用者體驗和網站的可用性。所以說，掌握這些標籤的使用，對於前端開發者來說是至關重要的。