協助使用者在表單中輸入資料

如要將表單設為互動式，您需要新增表單元素。 包括輸入及選取資料、描述控制項的元素 元素分組，以及將欄位分組的按鈕。

什麼是表單元素？

您會看到兩個 <input> 元素：<input type="text"> 和 <input type="file">。為什麼看起來不一樣？

根據元素名稱和 type 屬性： 瀏覽器會顯示不同的使用者介面 驗證規則後 並提供許多其他功能 使用適當的表單控制項可協助您製作更優質的表單。

表單元素標籤

假設您想新增一個輸入項目，供使用者輸入自己喜愛的顏色。 為此，您必須在表單中新增 <input> 元素。 然而，使用者如何知道他們應該填入最喜歡的顏色？

如要描述表單控制項，請為每個表單控制項使用 <label>。

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

標籤元素的 for 屬性與輸入內容中的 id 屬性相符。

擷取使用者輸入內容

顧名思義，<input> 元素可用來收集使用者的輸入內容。

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

如先前所述，id 屬性會將 <input> 連結至 <label>。 這個範例中的名稱和類型屬性為何？

名稱屬性

使用 name 屬性，即可識別使用者透過控制項輸入的資料。 如果提交表單，要求中會包含這個名稱。 假設您將表單控制項命名為 mountain，而使用者輸入了 Gutenberg， 要求中會包含這項資訊做為 mountain=Gutenberg。

嘗試改變 hill 的表單控制項名稱。 如果您已正確操作，並提交表單，網址會顯示 hill。

輸入類型

我們提供 表單控制項類型 提供各種實用的內建功能，適用於不同瀏覽器和平台。根據type 屬性，瀏覽器就會呈現不同的使用者介面、顯示不同的螢幕小鍵盤，並使用 驗證規則等以下說明如何變更類型。

使用 type="checkbox" 時，瀏覽器現在會顯示核取方塊，而非文字欄位。 核取方塊也會包含其他屬性。 您可以設定 checked 屬性，使其顯示為勾選。

您還可以選擇其他各種類型。 我們會在後續的單元中詳細說明。

允許多行文字

假設您需要供使用者撰寫註解的欄位。 在這種情況下，如果可以輸入多行文字，那該有多好？ 這是 <textarea> 元素的用途。

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

從選項清單中挑選

如何為使用者提供可選取的選項清單？ 您可以使用 <select> 元素來完成這項作業。

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

請先新增 <select> 元素。 與其他表單控制項一樣，您可以透過 id 屬性將其連結至 <label> 並使用 name 屬性為該變數指定不重複的名稱。

在 <select> 元素的開始與結束標記之間 您可以新增多個 <option> 元素，每個元素代表一個選項。

每個選項都有專屬的 value 屬性，因此可以在處理表單資料時加以區別。 選項元素中的文字是人類可讀的值。

如果您使用這個<select>提交表單，但未變更選項， 要求將包含 color=orange。不過，瀏覽器如何知道該使用哪個選項？

除非符合下列條件，否則瀏覽器會使用清單中的第一個選項：

• 一個 <option> 元素含有 selected 屬性。
• 使用者選擇了其他選項。

預先選取選項

您可以使用 selected 屬性預先選取一個選項。 無論 <option> 元素的定義順序為何，這都會成為預設值。

分組表單控制項

有時您需要將表單控制項分組。您可以使用 <fieldset> 元素來達到目的。

<fieldset>
    <legend>What is your favorite web technology</legend>

    <label for="html">HTML</label>
    <input type="radio" name="webfeature" value="html" id="html">

    <label for="css">CSS</label>
    <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

您是否注意到 <fieldset> 元素中的 <legend> 元素？你認為它的用途為何？

如果答案是「描述一組表單控制項」，沒錯！

每個 <fieldset> 元素都需要 <legend> 元素。 就像每個表單控制項都需要相關聯的 <label> 元素一樣。 <legend> 也必須是 <fieldset> 中的第一個元素。 在 <legend> 元素之後，您可以定義應加入群組的表單控制項。

提交表單

瞭解如何新增表單控制項並分組後，您可能會好奇使用者該如何提交表單？

第一個選項是使用 <button> 元素。

<button>Submit</button>

使用者按一下「Submit」按鈕後， 瀏覽器會向 <form> 元素的 動作屬性 包含表單控制項上的所有資料

您也可以搭配使用 <input> 元素與 type="submit"，而非 <button> 元素。 輸入內容的外觀和行為與 <button> 相似。不使用 <label> 元素描述 <input>，請改用 value 屬性。

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

此外，當表單欄位含有焦點時，您也可以使用 Enter 鍵提交表單。

隨堂測驗

測試您對表單元素的瞭解程度

資源

• 標籤元素
• Input 元素
• Textarea 元素
• Select the 元素
• Fieldset 元素
• 按鈕元素