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

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

什麼是表單元素?

您會看到兩個 <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 鍵提交表單。

隨堂測驗

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

如何將 <label> 連結至表單控制項?

<label>for='color'<input>name='color'
請再試一次!
<label>for='color'<input>id='color'
答對了!
<label>id='color'<input>for='color'
請再試一次!
<label>name='color'<input>for='color
請再試一次!

如何控制多行表單?

<input> 元素搭配 type='multi-line'
請再試一次!
<text> 元素。
請再試一次!
<textarea> 元素。
🎉
<input> 元素搭配 type='long'
請再試一次!

如何提交表單?

按一下 <button> 元素。
答對了。
使用 Enter 鍵。
答對了。
按一下含有 type='submit'<input> 元素。
答對了。
以上皆是。
正確!所有答案都能用來提交表單。

資源