其他表單控制元件
現在，我們將詳細瞭解非<input>表單元素的功能，從下拉列表和多行文字欄位等其他控制元件型別，到其他有用的表單功能，例如<output>元素（我們已經在上一篇文章中看到其作用）和進度條。
| 預備知識 | 對 HTML 的基本理解。 |
|---|---|
| 目標 | 瞭解非<input>表單功能，以及如何使用 HTML 實現它們。 |
多行文字欄位
多行文字欄位使用<textarea>元素指定，而不是使用<input>元素。
<textarea cols="30" rows="8"></textarea>
渲染效果如下：
<textarea>和常規單行文字欄位之間的主要區別在於，使用者可以包含硬回車（即按回車鍵），這些硬回車將在提交資料時包含在內。
<textarea>也帶有結束標籤；任何你希望它包含的預設文字都應該放在開始和結束標籤之間。相反，<input>是一個空元素，沒有結束標籤——任何預設值都放在value屬性中。
請注意，儘管你可以在<textarea>元素中放置任何內容（包括其他 HTML 元素、CSS 和 JavaScript），但由於其性質，所有內容都將呈現為純文字內容。（在非表單控制元件上使用contenteditable提供了一個 API，用於捕獲 HTML/“富文字”內容而不是純文字）。
在視覺上，輸入的文字會自動換行，並且表單控制元件預設可調整大小。大多數瀏覽器都提供一個拖動手柄，你可以拖動它來增大/減小文字區域的大小。
你可以在本系列第一篇文章中我們建立的示例中找到文字區域的用法。
控制多行渲染
<textarea>接受三個屬性來控制其多行渲染
控制文字區域的可調整大小
<textarea>的可調整大小能力由 CSS 的resize屬性控制。其可能的值有
both：預設值——允許水平和垂直調整大小。horizontal：只允許水平調整大小。vertical：只允許垂直調整大小。none：不允許調整大小。block和inline：實驗性值，只允許在block或inline方向調整大小（這取決於文字的方向性；如果你想了解更多，請閱讀處理不同的文字方向）。
在resize參考頁面的頂部，玩轉互動式示例，瞭解這些如何工作。
下拉控制元件
下拉控制元件是一種簡單的方法，可以讓使用者從眾多選項中進行選擇，而不會佔用使用者介面太多空間。HTML 有兩種型別的下拉控制元件：選擇框和自動完成框。這兩種下拉控制元件的互動方式相同——控制元件啟用後，瀏覽器會顯示一個使用者可以從中選擇的值列表。
注意：你可以在 GitHub 上找到所有下拉框型別的示例，位於drop-down-content.html（也可在此處檢視即時示例）。
選擇框
一個簡單的選擇框是使用<select>元素建立的，它包含一個或多個<option>元素作為其子元素，每個子元素指定其一個可能的值。
基本示例
<select id="simple" name="simple">
<option>Banana</option>
<option selected>Cherry</option>
<option>Lemon</option>
</select>
如果需要，可以選擇框的預設值可以使用所需的<option>元素上的selected屬性來設定——此選項在頁面載入時預選。
使用 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 用法
根據HTML 規範，list屬性和<datalist>元素可以與任何需要使用者輸入的控制元件一起使用。這導致了一些可能看起來不太明顯的用法。
例如，在支援<datalist>range輸入型別，每個 datalist <option><input type="range">參考頁面上看到它的實現示例。
而支援<datalist>和<input type="color">的瀏覽器應將自定義調色盤顯示為預設值，同時仍然提供完整的調色盤。
在這種情況下，不同的瀏覽器在不同情況下行為各異，因此請將此類用法視為漸進式增強，並確保它們優雅地降級。
其他表單功能
還有一些其他表單功能不像我們已經提到的那樣明顯，但在某些情況下仍然有用，所以我們認為值得簡要提及一下。
注意：你可以在 GitHub 上找到本節的示例，名為other-examples.html（也可在此處檢視即時示例）。
儀表和進度條
儀表和進度條是數值的視覺表示。<progress>和<meter>在所有現代瀏覽器中都可用。
儀表
儀表條表示在由max和min值限定的範圍內的固定值。此值以條形圖的形式視覺化呈現，為了瞭解此條形圖的外觀，我們將該值與一些其他設定值進行比較
-
optimum值定義了<meter>元素的最佳值。結合low和optimum值在範圍的下部，則下部範圍被認為是首選部分，中部範圍被認為是平均部分，上部範圍被認為是較差部分。 - 如果
optimum值在範圍的中部，則下部範圍被認為是平均部分，中部範圍被認為是首選部分，上部範圍也被認為是平均部分。 - 如果
optimum值在範圍的上部，則下部範圍被認為是較差部分，中部範圍被認為是平均部分，上部範圍被認為是首選部分。
所有實現<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 知識，我們將著手為它們設定樣式。