如要製作互動式表單，請新增表單元素。 包括輸入及選取資料的控制項、描述控制項的元素、將欄位分組的元素，以及提交表單的按鈕。
什麼是表單元素？
您會看到兩個 <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 屬性，因此處理表單資料時，您可以區分這些選項。
選項元素內的文字是使用者可讀的值。
如果您使用這份表單<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>
使用者點選「提交」按鈕後，瀏覽器會向 <form> 元素動作屬性中指定的網址提出要求，並附上表單控制項的所有資料。
您也可以使用 <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> 元素。