แท็ก <datalist> ใน HTML5 ใช้เพื่อสร้างรายการตัวเลือก (option list) ที่สามารถกรอกหรือเลือกได้ในฟอร์ม โดยการใช้งานแท็ก <datalist> มักจะถูกใช้ร่วมกับอินพุต <input> ที่มีการกำหนดค่า list ให้ตรงกับค่า id ของ <datalist> เพื่อให้ผู้ใช้งานสามารถเลือกค่าจากรายการที่กำหนดไว้ หรือพิมพ์ค่าใหม่เองได้
การใช้งานพื้นฐานของ <datalist>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ตัวอย่างการใช้ datalist</title>
</head>
<body>
<form>
<label for="browsers">เลือกเบราว์เซอร์ของคุณ:</label>
<input list="browsers" id="browsers" name="browser" placeholder="กรอกหรือเลือก...">
<datalist id="browsers">
<option value="Google Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Edge">
</datalist>
</form>
</body>
</html>ในตัวอย่างนี้ เมื่อผู้ใช้คลิกหรือพิมพ์ในช่องอินพุต ระบบจะเสนอรายการตัวเลือกที่มีอยู่ใน <datalist> ให้เลือก แต่ถ้าผู้ใช้ต้องการกรอกข้อมูลที่ไม่มีในรายการก็สามารถทำได้เช่นกัน
การประยุกต์ใช้งาน <datalist>
ค้นหาจากตัวเลือกที่มีมากมาย เมื่อรายการข้อมูลมีจำนวนมาก เช่น ชื่อประเทศ สกุลเงิน หรือภาษาต่างๆ การใช้ <datalist> จะช่วยกรองรายการที่ผู้ใช้สนใจและลดเวลาที่ใช้ในการพิมพ์ข้อมูล
<form>
<label for="country">เลือกประเทศของคุณ:</label>
<input list="countries" id="country" name="country" placeholder="เลือกประเทศ...">
<datalist id="countries">
<option value="Thailand">
<option value="United States">
<option value="United Kingdom">
<option value="Japan">
<option value="Australia">
</datalist>
</form>ฟังก์ชันแนะนำคำ (Autocomplete) <datalist> สามารถช่วยในการแนะนำคำที่พบบ่อยหรือคำที่เคยใช้ในการพิมพ์ข้อมูล เช่น คำที่ใช้ซ้ำๆ หรือคำที่อยู่ในระบบ
<form>
<label for="email">กรอกอีเมลที่เคยใช้งาน:</label>
<input list="emails" id="email" name="email" placeholder="อีเมล...">
<datalist id="emails">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
</datalist>
</form>การกรอกข้อมูลที่เกี่ยวข้องกับการค้นหา สามารถประยุกต์ใช้เพื่อกรอกข้อมูลที่เกี่ยวข้องกับคำค้นหา เช่น การค้นหาสินค้า ชื่อแบรนด์ หรือรุ่นของสินค้า โดยเสนอรายการที่ตรงกับคำค้นหาของผู้ใช้
<form>
<label for="product">ค้นหาสินค้า:</label>
<input list="products" id="product" name="product" placeholder="พิมพ์ชื่อสินค้า...">
<datalist id="products">
<option value="iPhone 14">
<option value="Samsung Galaxy S23">
<option value="Google Pixel 8">
<option value="OnePlus 11">
</datalist>
</form>การใช้งานร่วมกับ input types อื่นๆ แม้จะนิยมใช้ <datalist> ร่วมกับ type="text" แต่ก็สามารถใช้กับอินพุตประเภทอื่น เช่น type="number" ได้ โดยระบบจะเสนอรายการตัวเลขให้ผู้ใช้เลือก
<form>
<label for="quantity">เลือกจำนวน:</label>
<input list="quantities" id="quantity" name="quantity" type="number" placeholder="จำนวน...">
<datalist id="quantities">
<option value="1">
<option value="5">
<option value="10">
<option value="20">
</datalist>
</form>สรุป
แท็ก <datalist> ช่วยเพิ่มประสบการณ์การกรอกข้อมูลให้สะดวกและง่ายขึ้น ช่วยแนะนำหรือกรองรายการที่ต้องการกรอกได้อย่างรวดเร็ว ทั้งยังสามารถปรับแต่งและประยุกต์ใช้กับข้อมูลประเภทต่างๆ ได้อย่างยืดหยุ่น