Thẻ <datalist> được dùng để định nghĩa các tùy chọn được xác định trước cho thẻ <input>. Khi người dùng đặt con trỏ chuột vào ô <input>, tất cả các tùy chọn định sẵn này sẽ hiển thị ra để lựa chọn.
Ví dụ
<!DOCTYPE html> <html> <body> <p>Môn học yêu thích</p> <form action="" method="get"> <input list="subject" name="subject"> <datalist id="subject"> <option value="Lập trình"> <option value="Mạng máy tính"> <option value="Cơ sở dữ liệu"> <option value="Big Data"> <option value="Điện toán đám mây"> <option value="Framework"> </datalist> <input type="submit"> </form> </body> </html>
Kết quả
Bây giờ, hãy đặt con trỏ chuột vào trong ô nhập liệu. Các tùy chọn định sẵn sau đây sẽ hiện ra:
Trong ví dụ trên, chúng ta đã thiết lập các tùy chọn định sẵn cho <input> thông qua phần tử <datalist>:
<datalist id="subject"> <option value="Lập trình"> <option value="Mạng máy tính"> <option value="Cơ sở dữ liệu"> <option value="Big Data"> <option value="Điện toán đám mây"> <option value="Framework"> </datalist>
Khi đặt con trỏ vào ô <input> ở trên, các tùy chọn sau sẽ hiển thị, được định nghĩa trước bằng phần tử <datalist>:
Lập trình Mạng máy tính Cơ sở dữ liệu Big Data Điện toán đám mây Framework