其他表單控制元件
我們現在詳細介紹非<input> 表單元素的功能，從其他控制元件型別（如下拉列表和多行文字欄位）到其他有用的表單功能，如<output> 元素（我們在上一篇文章中看到過它的實際應用）和進度條。
| 先決條件 | 對HTML 的基本瞭解。 |
|---|---|
| 目標 | 瞭解非<input> 表單功能，以及如何使用 HTML 實現它們。 |
多行文字欄位
使用 `<textarea>` 元素來指定多行文字欄位，而不是使用 `<input>` 元素。
<textarea cols="30" rows="8"></textarea>
呈現效果如下
<textarea> 和普通單行文字欄位之間的主要區別在於，允許使用者包含硬換行符（即按下回車鍵），這些換行符將在資料提交時包含在內。
<textarea> 也需要一個結束標籤；任何希望它包含的預設文字都應該放在開始標籤和結束標籤之間。相比之下，`<input>` 是一個 `空元素`，沒有結束標籤 - 任何預設值都放在 `value` 屬性中。
請注意，即使你可以在 <textarea> 元素中放置任何內容（包括其他 HTML 元素、CSS 和 JavaScript），但由於其性質，所有內容都將被呈現為純文字內容。（在非表單控制元件上使用 `contenteditable` 提供了一個 API 來捕獲 HTML/"富文字"內容，而不是純文字）。
在視覺上，輸入的文字會自動換行，並且表單控制元件預設情況下可以調整大小。現代瀏覽器提供一個拖動控制代碼，你可以拖動它來增加或減小文字區域的大小。
以下螢幕截圖顯示了 Firefox 71 和 Safari 13 在 macOS 上以及 Edge 18、Yandex 14、Firefox 71 和 Chrome 79 在 Windows 10 上的預設、獲得焦點的和停用的 <textarea> 元素。
注意： 你可以在本系列第一篇文章中找到一個更有趣的文字區域使用示例 `example`（`see the source code also`）。
控制多行渲染
`<textarea>` 接受三個屬性來控制其跨多行的渲染
控制 textarea 可調整大小
下拉控制元件
下拉控制元件是一種簡單的方式，可以讓使用者在不佔用太多使用者介面空間的情況下從許多選項中進行選擇。HTML 有兩種下拉控制元件：**選擇框**和**自動完成框**。這兩種型別下拉控制元件的互動方式相同 - 啟用控制元件後，瀏覽器會顯示使用者可以選擇的值列表。
注意： 你可以在 GitHub 上找到所有下拉框型別的示例，地址為 `drop-down-content.html`（`see it live also`）。
選擇框
可以使用 `<select>` 元素建立一個簡單的選擇框，該元素有一個或多個 `<option>` 元素作為其子元素，每個元素指定其可能值之一。
基本示例
<select id="simple" name="simple">
<option>Banana</option>
<option selected>Cherry</option>
<option>Lemon</option>
</select>
如果需要，可以使用 `selected` 屬性在所需的 `<option>` 元素上設定選擇框的預設值 - 這樣，當頁面載入時，該選項就會被預先選中。
使用 optgroup
`<option>` 元素可以巢狀在 `<optgroup>` 元素中，以建立視覺上關聯的值組
<select id="groups" name="groups">
<optgroup label="fruits">
<option>Banana</option>
<option selected>Cherry</option>
<option>Lemon</option>
</optgroup>
<optgroup label="vegetables">
<option>Carrot</option>
<option>Eggplant</option>
<option>Potato</option>
</optgroup>
</select>
在 `<optgroup>` 元素上，`label` 屬性的值將顯示在巢狀選項的值之前。瀏覽器通常會將它們在視覺上與選項區分開來（例如，透過加粗和不同的巢狀級別），這樣它們就不太可能被誤認為是實際選項。
使用 value 屬性
如果 `<option>` 元素具有顯式設定的 value 屬性，則當表單提交時，該值將被髮送，並且該選項被選中。如果省略了 value 屬性，就像上面的示例一樣，`<option>` 元素的內容將用作值。因此，不需要 value 屬性，但你可能會發現需要將一個簡短的或與選擇框中顯示的不同的值傳送到伺服器。
例如
<select id="simple" name="simple">
<option value="banana">Big, beautiful yellow banana</option>
<option value="cherry">Succulent, juicy cherry</option>
<option value="lemon">Sharp, powerful lemon</option>
</select>
預設情況下，選擇框的高度足以顯示單個值。可選的 `size` 屬性可以控制當選擇框沒有焦點時顯示多少個選項。
多選選擇框
預設情況下，選擇框允許使用者只選擇一個值。透過向 `<select>` 元素新增 `multiple` 屬性，你可以允許使用者選擇多個值。使用者可以使用作業系統提供的預設機制來選擇多個值（例如，在桌面上，可以按住 Cmd/Ctrl 鍵單擊多個值）。
<select id="multi" name="multi" multiple size="2">
<optgroup label="fruits">
<option>Banana</option>
<option selected>Cherry</option>
<option>Lemon</option>
</optgroup>
<optgroup label="vegetables">
<option>Carrot</option>
<option>Eggplant</option>
<option>Potato</option>
</optgroup>
</select>
注意： 在多選選擇框的情況下，你會注意到選擇框不再將值顯示為下拉內容 - 而是所有值都會在列表中一次性顯示，可選的 `size` 屬性決定了小部件的高度。
自動完成框
可以使用 `<datalist>` 元素提供建議的自動完成值，該元素具有子元素 `<option>` 元素來指定要顯示的值。<datalist> 需要被賦予一個 id。
然後，資料列表使用 `list` 屬性繫結到 `<input>` 元素（例如 text 或 email 輸入型別），該屬性的值是繫結資料列表的 id。
一旦資料列表與表單小部件關聯，它的選項就會被用來自動完成使用者輸入的文字；通常情況下，這會以下拉框的形式顯示給使用者，其中列出了他們輸入的內容的可能匹配項。
基本示例
讓我們看一個例子。
<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion" />
<datalist id="mySuggestion">
<option>Apple</option>
<option>Banana</option>
<option>Blackberry</option>
<option>Blueberry</option>
<option>Lemon</option>
<option>Lychee</option>
<option>Peach</option>
<option>Pear</option>
</datalist>
Datalist 支援和回退
幾乎所有瀏覽器都支援 datalist，但如果你仍然支援較舊的瀏覽器，例如 IE 版本低於 10 的瀏覽器，那麼有一個技巧可以提供回退
<label for="myFruit">What is your favorite fruit? (With fallback)</label>
<input type="text" id="myFruit" name="fruit" list="fruitList" />
<datalist id="fruitList">
<label for="suggestion">or pick a fruit</label>
<select id="suggestion" name="altFruit">
<option>Apple</option>
<option>Banana</option>
<option>Blackberry</option>
<option>Blueberry</option>
<option>Lemon</option>
<option>Lychee</option>
<option>Peach</option>
<option>Pear</option>
</select>
</datalist>
支援 `<datalist>` 元素的瀏覽器會忽略所有不是 `<option>` 元素的元素，datalist 將按預期工作。不支援 `<datalist>` 元素的舊瀏覽器會顯示標籤和選擇框。
以下螢幕截圖顯示了 Safari 6 中呈現的 datalist 回退
如果你使用此回退，請確保在伺服器端收集 <input> 和 <select> 的資料。
不太明顯的 datalist 用法
根據 `HTML 規範`，`list` 屬性和 `<datalist>` 元素可以與任何需要使用者輸入的小部件一起使用。這導致了一些看起來不太明顯的用法。
例如，在支援 <datalist>range 輸入型別上將顯示一個小的刻度線，用於表示每個 datalist <option><input type="range"> 參考頁面上檢視此示例`。
而支援 `<datalist>` 和 `<input type="color">` 的瀏覽器應該將定製的顏色調色盤顯示為預設顏色，同時仍然提供完整的顏色調色盤。
在這種情況下，不同的瀏覽器在不同情況下有不同的行為，因此請將這些用法視為漸進式增強，並確保它們能優雅地降級。
其他表單功能
還有一些其他表單功能，不像我們已經提到的那些功能那麼明顯，但在某些情況下仍然很有用，因此我們認為值得簡要提及。
注意： 你可以在 GitHub 上找到本節的示例，地址為 `other-examples.html`（`see it live also`）。
儀表和進度條
儀表和進度條是數值的視覺表示。所有現代瀏覽器都支援 `<progress>` 和 `<meter>`。
儀表
儀表條表示由 `max` 和 `min` 值限定的範圍內的固定值。此值將以條形圖的形式進行視覺渲染，要了解此條形圖的外觀，我們需要將該值與其他一些設定值進行比較
所有實現 <meter> 元素的瀏覽器都使用這些值來更改刻度條的顏色。
- 如果當前值位於範圍的首選部分，則刻度條為綠色。
- 如果當前值位於範圍的平均部分，則刻度條為黃色。
- 如果當前值位於範圍的最差部分，則刻度條為紅色。
使用 <meter> 元素建立這樣的刻度條。這用於實現任何型別的刻度表；例如，顯示磁碟使用總空間的刻度條，當開始變滿時會變為紅色。
<meter min="0" max="100" value="75" low="33" high="66" optimum="0">75</meter>
<meter> 元素內部的內容是針對不支援該元素的瀏覽器和輔助技術的備用內容，以便對其進行語音朗讀。
進度
進度條表示一個隨著時間推移而變化的值，該值達到由 max 屬性指定的最大值。使用 <progress> 元素建立這樣的刻度條。
<progress max="100" value="75">75/100</progress>
這用於實現任何需要進度報告的內容，例如已下載的總檔案百分比或問卷中已填寫的題目數量。
<progress> 元素內部的內容是針對不支援該元素的瀏覽器和螢幕閱讀器的備用內容，以便對其進行語音朗讀。
測試你的技能！
您已閱讀完本文，但您還記得最重要的資訊嗎？您可以在繼續之前進行一些進一步的測試，以驗證您是否已保留這些資訊 - 請參閱 測試您的技能：其他控制元件。
總結
正如您在過去幾篇文章中所看到的，表單控制元件有很多型別。您不必一次記住所有這些細節，可以隨時返回這些文章以檢查詳細資訊。
現在您已經掌握了不同可用表單控制元件背後的 HTML，我們將看一下 如何對其進行樣式設定。