如要讓表單具備互動功能,您必須新增表單元素。其中包含用於輸入及選取資料的控制項、描述控制項的元素、將欄位分組的元素,以及用於提交表單的按鈕。
什麼是表單元素?
您會看到兩個 <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 屬性
使用 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
屬性,因此您可以在處理表單資料時加以區分。option 元素中的文字是人類可讀的值。
如果您使用這個 <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>
元素的 action 屬性中指定的網址提出要求,並附上表單控制項的所有資料。
您也可以使用 <input>
元素搭配 type="submit"
,而非 <button>
元素。輸入內容的外觀和行為都與 <button>
相同。請改用 value
屬性,而非使用 <label>
元素來描述 <input>
。
<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>
元素。