資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML 中<datalist> 和 <select> 標籤的區別
<datalist> 和 <select> 標籤通常都用於從列表中選擇專案。但是，這兩個標籤之間的關鍵區別在於，<datalist> 標籤允許使用者使用 <input> 元素新增自己的輸入作為選項，而 <select> 標籤不提供此功能。
讓我們深入瞭解本文，以便更好地理解 HTML 中 <datalist> 和 <select> 標籤之間的區別。
HTML <datalist> 標籤
此標籤指定 <input> 元素的預定義選項。此外，HTML <input> 元素從此標籤接收自動完成功能。使用者將看到以他們在 <datalist> 標籤的 input 元素中輸入的字母或單詞開頭的預定義備選方案。請注意，為了使用 <datalist> 標籤，該標籤的 ID 必須與 <input> 元素屬性匹配。
語法
以下是 HTML <datalist> 標籤的語法
<datalist id="…."> <option value="…"> <option value="…."> </datalist>
示例
以下是在我們將使用 <datalist> 標籤的示例。
<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3">
<label for="tutorial"> Select The Course: </label>
<input list="tutorial" name="course" id="course">
<datalist id="tutorial">
<option value="HTML">
<option value="AI">
<option value="Cyber Security">
<option value="Big Data">
</datalist>
<p style="color: #DE3163;"> Note:User Can Select The Option OR Enter Course On Their Own. </p>
</body>
</html>
執行以上程式碼後，將彈出輸出視窗，在網頁上顯示輸入欄位。當用戶開始輸入時，它將提供一個下拉列表以根據使用者的願望選擇一個選項，或者使用者可以手動輸入。
HTML <select> 標籤
此標籤向網頁新增下拉選單列表，主要用於我們都用來收集使用者輸入的線上表單。<option> 標籤是 <select> 標籤的一部分，用於顯示下拉列表的選項。該標籤具有多個屬性，包括 <name>、<autofocus> 等。
語法
以下是 HTML <select> 標籤的語法
<select id="…"> <option value="..">text</option> <option value="…">text</option> </select>
示例
在以下示例中，我們將使用 <select> 標籤。
<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF">
<label for="tutorial"> Choose The Car: </label>
<select id="tutorial">
<option value="bmw">BMW</option>
<option value="rs7">RS7</option>
<option value="audi">AUDI</option>
<option value="bugati">BUGATI</option>
</select>
</body>
</html>
當以上程式碼執行時，它將生成一個輸出，其中包含使用者輸入以及網頁上的下拉列表。
<datalist> 和 <select> 的區別
讓我們瞭解一下 <datalist> 和 <select> 標籤之間的一些關鍵區別。
<datalist> 標籤 |
<select> 標籤 |
|---|---|
使用者可以選擇提供的列表中的任何專案或提供自己的輸入。 |
使用者只能從可用選項列表中選擇一個。 |
此標籤不是表單輸入的一種。 |
此標籤是表單輸入的一種。 |
使用者可以快速提交選擇，接收建議，然後選擇一個。 |
要選擇一個選項，使用者需要檢視一個很長的列表。 |
選項列表對使用者沒有任何限制。 |
使用者可能只能獲得有限數量的備選方案。 |
它提供自動完成功能。 |
缺少自動完成功能。 |
858 次瀏覽
