HTML<select> giới hạn lựa chọn; <datalist> chỉ gợi ý, người dùng vẫn gõ tự do.
html
<!-- select: giá trị PHẢI nằm trong danh sách -->
<label for="country">Quốc gia</label>
<select id="country" name="country">
<option value="vn">Việt Nam</option>
<option value="sg">Singapore</option>
</select>
<!-- datalist: gợi ý, gõ gì cũng được -->
<label for="tech">Công nghệ</label>
<input id="tech" name="tech" list="tech-options">
<datalist id="tech-options">
<option value="React">
<option value="Vue">
</datalist><select> | <datalist> | |
|---|---|---|
| Nhập giá trị ngoài danh sách | không | được |
| Gõ để lọc | không (chỉ nhảy theo chữ cái) | có |
| Giá trị gửi đi | option.value | đúng chuỗi đã gõ |
Chọn thế nào: tập cố định và server phải nhận đúng mã (quốc gia, danh mục, trạng thái) → <select>. Ô tìm kiếm, tag, thành phố có gợi ý nhưng cho phép giá trị mới → <datalist>.
Lưu ý: <datalist> không tự validate — người dùng gõ gì server nhận nấy, vẫn phải kiểm tra lại. Ngoài ra giao diện dropdown của nó khác nhau khá nhiều giữa các browser, không style được nhiều; cần kiểm soát giao diện thì phải tự dựng combobox.