HTML Datalist 标签

2025年3月25日 | 1 分钟阅读

HTML 的 <datalist> 标签用于为表单元素提供自动完成功能。它向用户提供预定义的选项列表，供用户选择数据。

datalist 标签是在 HTML5 中引入的。

datalist 标签应该与包含 "list" 属性的 input 元素一起使用。 "list" 属性的值与 datalist 的 id 相关联。

HTML datalist 标签也支持全局属性和事件属性。

HTML datalist 标签示例

让我们看一个简单的 HTML5 datalist 标签示例。如果您输入 A，它将显示以字母 A 开头的板球运动员列表。

<label>
 Enter your favorite cricket player: Press any character<br />
 <input type="text" id="favCktPlayer" list="CktPlayers">
 <datalist id="CktPlayers">
 <option value="Sachin Tendulkar">
 <option value="Brian Lara">
 <option value="Jacques Kallis"> 
 <option value="Ricky Ponting"> 
 <option value="Rahul Dravid"> 
 <option value="Shane Warne"> 
 <option value="Rohit Sharma"> 
 <option value="Donald Bradman"> 
 <option value="Saurav Ganguly "> 
 <option value="AB diVilliers"> 
 <option value="Mahendra Singh Dhoni"> 
 <option value="Adam Gilchrist">
 </datalist>
</label>

输出

输入您最喜欢的板球运动员：输入任意字符