HTML - 列表屬性

HTML list 屬性用於 <input> 元素，以指定使用者可以選擇的一系列預定義選項。

datalist 元素提供預定義值的列表，以建議使用者為此輸入使用。

工作原理

當用戶開始在輸入欄位中鍵入時，將出現一個下拉列表，其中包含在 <datalist> 中定義的選項。
使用者可以從此列表中選擇一個選項，該選項將使用所選值填充輸入欄位。
這對於提供建議或使用者可以選擇的一系列預定義值特別有用，從而增強了使用者體驗。

語法

<tag list = "value" />

其中 value 應為 datalist 元素的 id 值。

應用於

以下列出的元素允許使用 HTML 列表屬性

元素	描述
<input>	HTML <input> 標籤用於接受使用者輸入的各種型別。

HTML 列表屬性示例

以下示例將說明 HTML 列表屬性，以及我們應該在哪裡以及如何使用此屬性！

帶有 datalist 中預定義值的文字輸入

在以下示例中，我們將 `list` 屬性與 `input type=text` 一起使用，並將 `list` 屬性的值指定為 `datalist` 的 id 名稱。

<!DOCTYPE html>
<html lang="en">

<body>
   <p>
      Click on input field and select 
      from dropdown: 
   </p>
   <input type="text" list="fruits">
   <datalist id='fruits'>
      <option value="Apple"></option>
      <option value="Banana"></option>
      <option value="Orange"></option>
      <option value="Grapes"></option>
      <option value="Pears"></option>
   </datalist>
</body>

</html>

數字輸入的列表屬性

考慮另一種情況，我們將使用 `list` 屬性與 `input type=number`。使用者可以選擇下拉列表中的數字，或在欄位中輸入數字。

<!DOCTYPE html>
<html lang="en">

<body>
   <!--Example of the HTML list attribute -->
   <p>
      Click on input field and 
      select from dropdown: 
   </p>
   <input type="number" 
          list="numbers" 
          placeholder="Select number..">

   <datalist id='numbers'>
      <option value="10"></option>
      <option value="20"></option>
      <option value="30"></option>
      <option value="40"></option>
      <option value="50"></option>
   </datalist>

</body>
</html>

時間輸入的列表屬性

讓我們來看一下下面的示例，我們將使用 `list` 屬性與 `input type=time`。使用者可以選擇下拉列表中的時間，或輸入所需的時間。

<!DOCTYPE html>
<html lang="en">

<body>
   <p>
      Click on input field and 
      select from dropdown: 
   </p>
   <input type="time" 
          list="hours" 
          placeholder="Select time..">
   <datalist id='hours'>
      <option value="12:00"></option>
      <option value="13:00"></option>
      <option value="14:00"></option>
      <option value="15:00"></option>
   </datalist>
</body>

</html>

支援的瀏覽器

屬性
list	是 20.0	是 10.0	是 4.0	否	是 9.6

html_attributes_reference.htm

列印頁面