表單相關標籤

本文說明了表單相關的標籤。

這解釋了各種表單欄位，例如文字輸入和下拉選單。

YouTube Video

表單相關標籤

<form> 標籤

1<form action="/submit" method="post">...</form>

• <form> 標籤用於定義整個表單。
• action 屬性指定目的地，而 method 屬性指定方法（GET 或 POST）。
• 您也可以指定 target 屬性，類似於 <a> 標籤。

<input> 標籤（文字輸入欄位）

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> 建立單行文字輸入欄位。使用者可以輸入任何文字。

• placeholder 屬性指定描述性的文本，當輸入字段為空時會顯示。這有助於用戶輕鬆理解輸入要求。該文本在開始輸入時會自動消失。

  • placeholder 適合用於提供補充資訊，而不適合用於重要指示，例如必填輸入。在這種情況下，你應該使用標籤。

<input> 標籤（密碼輸入欄位）

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> 建立密碼輸入欄位。輸入的字符會被隱藏和遮蔽，以確保安全性。

<input> 標籤（電子郵件地址輸入欄位）

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> 建立一個用於輸入電子郵件地址的欄位，並進行驗證以確保正確的郵件格式。

<input> 標籤（複選框）

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> 建立一個複選框。當有多個選項時，使用者可以選擇多個項目。

<input> 標籤（單選按鈕）

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> 建立一個單選按鈕，允許使用者從一組選項中選擇僅一個。

<input> 標籤（提交按鈕）

1<input type="submit" value="Submit">

• <input type="submit"> 建立一個按鈕用於提交表單中的資料。
• 在提交時，value 屬性的值將包含在表單數據中。

<input> 標籤（重設按鈕）

1<input type="reset" value="Reset">

• <input type="reset">建立一個按鈕，可重置表單中的所有輸入值。

<input> 標籤（隱藏欄位）

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> 建立一個不會顯示在螢幕上的隱藏欄位，提交表單時用於向後端發送資料。

<input> 標籤（顏色選擇器）

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> 顯示一個顏色選擇器並建立一個輸入欄位，讓使用者選擇顏色。

<input> 標籤（日期輸入欄位）

1<input type="date" name="birthday">

• <input type="date"> 建立一個日期輸入欄位，顯示一個日曆以供選擇日期。

<input> 標籤（時間輸入欄位）

1<input type="time" name="appointment_time">

• <input type="time"> 建立一個輸入時間的欄位，並顯示時間選擇器。

<input> 標籤（文件輸入欄位）

1<input type="file" name="resume">

• <input type="file"> 建立一個輸入欄位，供使用者選擇和上傳文件。
• form 標籤的 enctype 屬性必須設置為 multipart/form-data。

<input> 標籤（數字）

1<input type="number" name="quantity" min="1" max="10">

• <input type="number">建立一個數字輸入欄位，可以設定最小值、最大值和增量（增/減量）。

<input> 標籤（數字範圍選擇欄位）

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range">建立一個輸入欄位，用戶可使用滑桿選擇一個範圍內的值。

<textarea> 標籤

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• <textarea>標籤建立一個多行文本輸入欄位。它適合輸入長文本或評論。

<select> 標籤

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• <select>標籤建立一個下拉選單，選項由<option>標籤定義。用戶可選擇一個或多個項目。

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• 若要啟用多重選擇，請添加 multiple 屬性。指定此屬性會將選項顯示為列表框。

<optgroup> 標籤

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• <optgroup> 標籤用於將相關選項分組在一起。label 屬性可讓您設置組名，即使列表很長，也為用戶提供清晰的選項。

<label> 標籤

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• <label>標籤為輸入欄位、複選框和單選按鈕定義標籤，提升可用性和可及性。
• 例如，單擊標籤可以聚焦輸入字段或切換複選框的開關狀態。

<fieldset> 標籤

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• <fieldset>標籤將相關的表單控件分組，<legend>標籤為該分組提供標題。

<button> 標籤

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• <button>標籤定義一個可點擊按鈕，用來觸發表單提交或其他動作。

  當指定type="button"時，它作為普通按鈕。點擊時不會提交表單或觸發任何其他預設動作。用於想用JavaScript設置自訂動作時。

  當指定type="submit"時，它作為表單提交按鈕。當點擊該按鈕時，包含它的表單將被提交。

  當指定type="reset"時，它作為表單的重置按鈕。點擊它會重置表單中的所有輸入欄位，並返回到初始狀態。

  如果未指定type屬性，某些瀏覽器可能會將其視為type="submit"，因此建議明確指定類型以確保預期行為。

• 標籤可在開啟和關閉標籤之間加入其他 HTML 內容，從而創建帶有圖標或複雜文本的按鈕。

• 使用 <input> 標籤作為提交按鈕時，value 屬性的值將包含在表單數據中，但使用 <button> 標籤時，默認不發送。

  通過為 <button> 標籤指定 name 和 value 屬性，可以將其值作為表單數據發送。

<datalist> 標籤

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• <datalist> 標籤為 <input> 元素提供可選的選項列表。用戶可以從列表中選擇，也可以輸入自己的值。

<output> 標籤

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• <output> 標籤顯示計算或用戶交互的結果。它用於在表單或腳本中動態顯示計算結果。
• 對於 for 屬性，請指定您想關聯的表單元素的 ID，並以空格分隔。

<progress> 標籤

1<progress value="70" max="100">70%</progress>

• <progress> 標籤向用戶顯示任務的進度。例如，它可以直觀地表示文件下載或安裝的進度。

<meter> 標籤

1<meter value="0.6">60%</meter>

• <meter> 標籤表示在已知範圍內的數值測量。它用於顯示特定範圍內的測量值，如磁盤使用情況或燃料表。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video