แอตทริบิวต์ list ใน HTML

แอตทริบิวต์ list ใน HTML ใช้ระบุถึงองค์ประกอบ <datalist> ที่มีตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับองค์ประกอบ <input> ในเอกสาร HTML

ไวยากรณ์

<input list="text">

ตัวอย่าง

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
  }
  input {
    display: block;
    width: 60%;
    margin: 1rem auto;
  }
</style>
<body>
<h1>ตัวอย่างแอตทริบิวต์ list ของ HTML</h1>
<input list="subject" placeholder='เลือกวิชาเลือกของคุณ'>
<datalist id='subject'>
  <option>คณิตศาสตร์</option>
  <option>ฟิสิกส์</option>
  <option>เศรษฐศาสตร์</option>
</datalist>
</body>
</html>

ผลลัพธ์

แสดงช่องป้อนข้อความที่มีรายการแนะนำจาก datalist เมื่อคลิกหรือพิมพ์