如何引用一個包含 `` 元素預定義選項的元素？在 HTML 中？

HTML 的 `` 標籤用於為表單元素新增自動完成功能。它為使用者提供了一組預定義的選項來選擇資料。“list” 屬性包含 “input” 元素，應與 “``” 標籤一起使用。`datalist` 的 id 和 “list” 屬性的值是相關的。

以下是一些例子……

示例

在下面的例子中，我們使用 `datalist` 為使用者提供預定義的選項。

如果您按下 A，它將顯示以字母 A 開頭的板球運動員列表。

<!DOCTYPE html>
<html>
<body>
   <label>
      Enter your favorite cricket player:<br />
      <input type="text" id="players" list="Players">
      <datalist id="Players">
         <option value="MSD">
         <option value="Virat">
         <option value="Sangakara">
         <option value="Sehwag">
         <option value="Watson">
         <option value="Raina">
         <option value="Hussey">
         <option value="ABD">
      </datalist>
   </label>
</body>
</html>

輸出

執行上述指令碼後，您將得到一個包含不同球員的資料列表，如果您按下任何字母，它將列出包含所按字母的名稱。

示例

另一個例子如下所示：

<!DOCTYPE html>
<html>
<head>
   <title>HTML Datalist Tag</title>
</head>
<body>
   <input list = "tutorials" />
   <datalist id = "tutorials">
      <option value = "Java">
      <option value = "ASP">
      <option value = "PHP">
      <option value = "Ruby">
      <option value = "jQuery">
   </datalist>
   <p>Try to add any of the tutorial name mentioned above.</p>
</body>
</html>

輸出

執行上述指令碼後得到的輸出如下：

示例：日期和時間型別

使用 `datalist` 標籤，選擇月份、日期、時間、本地時間等型別將更容易從下拉列表中選擇。

<!DOCTYPE html>
<html>
<head>
<body>
   <input type="time" list="Hours">
   <datalist id="Hours">
      <option value="10:00">
      <option value="11:00">
      <option value="12:00">
   </datalist>
</body>
</head>
</html>

輸出

執行上述指令碼後得到的輸出如下：

示例：範圍型別

使用 `datalist` 標籤，可以使用滑塊在特定範圍內選擇值，滑塊在每個推薦值處用多個雜湊標記表示。

<!DOCTYPE html>
<html>
<head>
<body>
   <input type="range" list="tickmarks">
   <datalist id="tickmarks">
      <option value="0">
      <option value="10">
      <option value="20">
      <option value="30">
   </datalist>
</body>
</head>
</html>

輸出

執行上述指令碼後得到的輸出如下：

示例：顏色型別

`datalist` 標籤允許使用者從各種顏色的列表中選擇預定義的顏色。

<!DOCTYPE html>
<html>
<head>
<body>
   <input type="color" list="Colors">
   <datalist id="Colors">
      <option value="#000000">
      <option value="#FFFFFF">
      <option value="#FFF000">
      <option value="#A11112">
   </datalist>
</body>
</head>
</html>

輸出

執行上述指令碼後得到的輸出如下：

示例：密碼型別

`datalist` 標籤允許使用者從各種密碼列表中選擇隨機生成的密碼。但出於安全原因，通常沒有瀏覽器支援它。

<!DOCTYPE html>
<html>
<head>
<body>
   <input type="password" list="randomPassword">
   <datalist id="randomPassword">
      <option value="5Mg[_3DnkgSu@!q#">
   </datalist>
</body>
</head>
</html>

輸出

執行上述指令碼後得到的輸出如下：

更新於：2022年9月6日

377 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.