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

HTML 的 `` 標籤用於向表單元素新增自動完成功能。它為使用者提供了一組預定義的選項來選擇資料。應將包含 "input" 元素的 "list" 屬性與 `` 標籤一起使用。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-09-06

377 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.