HTML 中的資料列表-html教學-PHP中文網

HTML 中的 Datalist 標籤範例

範例#3

結論

首頁

web前端

html教學

HTML 中的資料列表

PHPz

Sep 04, 2024 pm 04:22 PM

html html5 HTML Tutorial HTML Properties HTML tags

本文提供了 HTML 中資料清單的概要。 Datalist 是 HTML5 中可用的標籤，用於自動向使用者建議輸入值。此標籤是 HTML5 功能，使輸入元素更具互動性且使用者介面更直觀。標籤與輸入元素標籤一起使用。它用於顯示在輸入框中鍵入時可能出現的值。使用者可以自由地在輸入框中輸入任何值；僅 datalist 標籤將提供自動建議值。因此，使用者可以更靈活、更輕鬆地輸入值。

文法：

<input list = "xyz" name = "input name" >
<datalist id = "xyz" >
<option value = " . . . " >
<option value = " . . . " >
<option value = " . . . " >
<option value = " . . . " >
</datalist>

登入後複製

在這裡，我們有兩個主要標籤；一個是標籤，第二個是標籤。 datalist 標籤以開始標籤開始。並以結束標記結束。所有選項都包含在 datalist 標記之間。我們已經為 datalist 標籤（這裡是 xyz）指派了一個 id，並且這個相同的 id 值被傳遞給輸入標籤中的 list 屬性。因此，兩個標籤都透過相同的 id 連結。現在它們已鏈接，我們想要顯示或自動建議值列表。然後使用

選項標籤與選擇標籤使用的標籤相同。請注意 select 標籤和 datalist 標籤之間的差異。 select 標籤允許僅從可用選項中選擇值，而 datalist 標籤僅建議清單中的值。 name 屬性僅用於標識範例中的輸入元素。

屬性：

沒有可用的特殊屬性。標籤;預設情況下，它支援全域可用的 Event 和 HTML 屬性。

HTML 中的 Datalist 標籤範例

以下是範例：

範例#1

讓我們設計一個帶有自動建議選項的簡單輸入字段，如下所示：

代碼：

<! DOCTYPE html>
<html>
<body>
<label> Car Brand: </label>
<input list = "car_brands" name = "car brand" >
<datalist id = "car_brands" >
<option value = "Honda " >
<option value = "Hyundai " >
<option value = "Toyota " >
<option value = "Volkswagen " >
<option value = "Ford " >
<option value = "Mazda " >
<option value = "Chevrolet " >
<option value = "Kia " >
</datalist>
</body>
</html>

登入後複製

在這裡，我們有一個作為汽車品牌的輸入元素。在要顯示的自動建議中，我們已在選項標籤中列出。對於 datalist 標籤，我們將 id 指定為 car_brands，並將其傳遞給輸入元素。當使用者點擊使用者框或使用者開始輸入時，將自動彈出 HTML，其中包含上述自動建議值。

輸出:

HTML 中的資料列表

在輸出中，點選輸入框後，將顯示如上所示的汽車品牌清單。

範例#2

datalist標籤主要用於表單提交的情況。讓我們看一個嵌入表單的範例。

代碼：

<!DOCTYPE html>
<html>
<body>
<form action = "#" method = "get" >
<label> Car Brand: </label>
<input list = "car_brands" name = "car brand" >
<datalist id = "car_brands" >
<option value = "Honda " >
<option value = "Hyundai " >
<option value = "Toyota " >
<option value = "Volkswagen " >
<option value = "Ford " >
<option value = "Mazda " >
<option value = "Chevrolet " >
<option value = "Kia " >
</datalist>
<input type = "submit" >
</form>
</body>
</html>

登入後複製

輸出:

HTML 中的資料列表

在這裡，在輸出註解中，我們已將輸入元素移至表單元素中並新增了提交按鈕。

範例#3

資料清單自動建議將嘗試盡可能顯示最佳匹配。當使用者開始輸入時，將根據使用者輸入的值過濾掉建議。讓我們修改第一個範例以顯示此功能以及輸入元素的一些樣式。

代碼：

<!DOCTYPE html>
<html>
<head>
<style>
.cars {
height: 110px;
background-color: cadetblue;
width: 100%;
}
</style>
</head>
<body>
<div class = "cars" >
<label style = "font-size: x-large; font-weight: 500; margin-left: 20px " > Car Brand: </label >
<input list = "car_brands" name = "car brand" style = "margin-top: 40px; " >
<datalist id = "car_brands" >
<option value = "Aston Martin " >
<option value = "Audi " >
<option value = "Cadillac " >
<option value = "Chevrolet " >
<option value = "Honda " >
<option value = "Hyundai " >
<option value = "Chrysler " >
<option value = "Kia " >
</datalist>
</div>
</body>
</html>

登入後複製

無需使用者輸入即可輸出：

HTML 中的資料列表