วิธาใช้แอตทริบิวต์ List ใน HTML

บทนำ

แอตทริบิวต์ list เชื่อม <input> กับ <datalist> ให้ Autocomplete Suggestions (แตกต่างจาก Select ที่บังคับเลือก)

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML List Attribute</title>
  </head>
  <body>
    <p>พิมพ์ชื่อเครื่องมือ:</p>
    <input list="tools" name="tool" />
    <datalist id="tools">
      <option value="Image Editor">
      <option value="Whiteboard">
      <option value="Image Optimizer">
      <option value="Document Viewer">
    </datalist>
  </body>
</html>

โครงสร้าง

<input list="browserList" />
<datalist id="browserList">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

ความแตกต่าง List vs Select

Input Types ที่รองรับ list

• text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color