แท็ก <datalist> ใน HTML

แท็ก <datalist> ใน HTML

แท็ก <datalist> ใช้สำหรับกำหนดตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับแท็ก <input> เมื่อผู้ใช้วางเคอร์เซอร์ที่ช่อง <input> ตัวเลือกที่กำหนดไว้ล่วงหน้าจะปรากฏขึ้นมาให้เลือก

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <p>วิชาที่ชอบ</p>
  <form action="" method="get">
    <input list="subject" name="subject">
    <datalist id="subject">
      <option value="Programming">
      <option value="Networking">
      <option value="Database">
      <option value="Big Data">
      <option value="Cloud">
      <option value="Framework">
    </datalist>
    <input type="submit">
  </form>
</body>
</html>

ผลลัพธ์

ตอนนี้ วางเคอร์เซอร์ไว้ในช่องป้อนข้อมูล ตัวเลือกที่กำหนดไว้ล่วงหน้าจะปรากฏดังนี้:

ในตัวอย่างข้างต้น เราได้กำหนดตัวเลือกสำหรับ <input> ดังนี้:

<datalist id="subject">
  <option value="Programming">
  <option value="Networking">
  <option value="Database">
  <option value="Big Data">
  <option value="Cloud">
  <option value="Framework">
</datalist>

เมื่อวางเคอร์เซอร์ใน <input> ดังกล่าว ตัวเลือกต่อไปนี้จะปรากฏ ซึ่งเรากำหนดไว้ล่วงหน้าผ่านองค์ประกอบ <datalist>:

Programming Networking Database Big Data Cloud Framework