HTML <datalist>แท็ก
ตัวอย่าง
ดาต้าลิสต์พร้อมตัวเลือกที่กำหนดไว้ล่วงหน้า (เชื่อมต่อกับองค์ประกอบ <input>):
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
ความหมายและการใช้งาน
แท็ ก<datalist>
ระบุรายการของตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับองค์ประกอบ <input>
แท็ ก<datalist>
นี้ใช้เพื่อจัดเตรียมคุณลักษณะ "เติมข้อความอัตโนมัติ" สำหรับองค์ประกอบ <input> ผู้ใช้จะเห็นรายการแบบหล่นลงของตัวเลือกที่กำหนดไว้ล่วงหน้าเมื่อป้อนข้อมูล
แอตทริบิวต์<datalist>
id ขององค์ประกอบต้องเท่ากับแอตทริบิวต์ list ขององค์ประกอบ <input> (ซึ่งจะเชื่อมโยงเข้าด้วยกัน)
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนองค์ประกอบอย่างสมบูรณ์
Element | |||||
---|---|---|---|---|---|
<datalist> | 20.0 | 10.0 | 4.0 | 12.1 | 9.5 |
คุณสมบัติสากล
แท็ ก<datalist>
ยังสนับสนุน Global Attributes ในHTML
คุณสมบัติของเหตุการณ์
แท็ ก<datalist>
ยังสนับสนุนแอตทริบิวต์เหตุการณ์ใน HTML
หน้าที่เกี่ยวข้อง
การอ้างอิง HTML DOM: Datalist Object
การตั้งค่า CSS เริ่มต้น
เบราว์เซอร์ส่วนใหญ่จะแสดง<datalist>
องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
datalist {
display: none;
}