如要將表單設為互動式,您需要新增表單元素。 包括輸入及選取資料、描述控制項的元素 元素分組,以及將欄位分組的按鈕。
什麼是表單元素?
您會看到兩個 <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>
元素。