Thẻ datalist trong HTML
Bùi Tấn Lực - 947
- 27/09/2025
Chức năng của Thẻ datalist trong HTML
Thẻ datalist trong HTML dùng để chứa danh sách tiêu đề gợi ý cho thẻ input giúp người dùng dễ dàng chọn từ khóa tìm kiếm mà không cần nhập hết câu, giúp từ khóa tìm kiếm trở nên chính xác hơn.
Trong thẻ datalist bạn tạo giá trị cho thuộc tính id và bên thẻ input bạn tạo giá trị của thuộc tính list giống với giá trị id đó để liên kết với nhau.
Cú pháp của Thẻ datalist trong HTML
<input list="idlienket" >
<datalist id="idlienket">
<option value="tieudegoiy">
<option value="tieudegoiy">
<option value="tieudegoiy">
</datalist>
idlienket: idlienket nằm ở thuộc tính list trong thẻ input và trong thuộc tính id của datalist để 2 thẻ liên kết với nhau.
tieudegoiy: Tiêu đề gợi ý.
Code Thẻ datalist trong HTML
<form action="https://webmoi.vn/code-the-datalist-trong-html/" method="POST">
<label for="nhanvien">Nhân viên:</label>
<input list="nhanviens" name="txtnhanvien" id="nhanvien">
<datalist id="nhanviens">
<option value="Bùi Tấn Lực">
<option value="Trần Thị Vân">
<option value="Bùi Đan Trúc Quỳnh">
<option value="Nguyễn Thùy Dung">
<option value="Nguyễn Thảo Nhật Hạ">
</datalist>
<input type="submit" value="Tìm Kiếm">
<p>Lưu ý: datalist không được hỗ trợ trên Safari 12.0 trở xuống</p>
<p>Lưu ý nữa là giá trị của id trong thẻ datalist không được trùng với các id khác trên trang</p>
Cách sử dụng thẻ datalist trong HTML hiệu quả
Để khai thác tốt datalist trong HTML, lập trình viên cần hiểu cách liên kết giữa thẻ input và danh sách gợi ý. Người dùng vẫn có thể nhập dữ liệu tùy ý, trong khi trình duyệt hiển thị thêm các lựa chọn phù hợp giúp quá trình nhập nhanh và thuận tiện hơn.
Thẻ datalist thường được sử dụng cho những trường hợp cần hỗ trợ nhập liệu như tìm kiếm sản phẩm, chọn tên quốc gia, nhập chức danh, chọn mã sản phẩm hoặc các dữ liệu có khả năng được lặp lại nhiều lần.
Kết hợp thẻ datalist với input để tạo ô nhập gợi ý
Thẻ datalist không hoạt động độc lập mà cần kết hợp với thuộc tính list của thẻ input. Giá trị của thuộc tính này phải trùng với thuộc tính id của datalist để trình duyệt biết danh sách gợi ý nào cần hiển thị.
Khi người dùng nhập ký tự vào ô input, trình duyệt sẽ tự động lọc các giá trị phù hợp trong datalist và đưa ra danh sách đề xuất. Tuy nhiên, người dùng vẫn có thể nhập nội dung khác nếu không muốn chọn các giá trị có sẵn.
<label for="browser">Chọn trình duyệt:</label>
<input id="browser" name="browser" list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
</datalist>
Trong ví dụ trên, input sử dụng thuộc tính list để kết nối với datalist có id là browsers. Khi nhập dữ liệu, người dùng sẽ nhận được các gợi ý liên quan đến trình duyệt.
Một số điểm cần lưu ý khi triển khai:
- Nên đặt id của datalist có ý nghĩa để dễ quản lý mã nguồn.
- Các giá trị trong option nên được xây dựng rõ ràng, tránh tạo quá nhiều lựa chọn không cần thiết.
- Datalist phù hợp với dữ liệu gợi ý, không nên dùng thay thế hoàn toàn cho các hệ thống tìm kiếm nâng cao.
Sự khác nhau giữa datalist và select trong HTML
Mặc dù đều giúp người dùng lựa chọn dữ liệu, nhưng datalist và select có cách hoạt động khác nhau. Đây là điểm nhiều người mới học HTML thường nhầm lẫn khi lựa chọn thẻ phù hợp.
| Tiêu chí | Datalist | Select |
|---|---|---|
| Cách nhập dữ liệu | Cho phép nhập tự do hoặc chọn gợi ý có sẵn | Chỉ chọn trong danh sách được cung cấp |
| Mục đích sử dụng | Hỗ trợ nhập liệu nhanh bằng gợi ý | Chọn một hoặc nhiều giá trị cố định |
| Khả năng tùy chỉnh | Linh hoạt hơn với dữ liệu không giới hạn | Kiểm soát lựa chọn chặt chẽ hơn |
| Trường hợp phù hợp | Tìm kiếm, nhập tên, mã, từ khóa | Chọn danh mục, trạng thái, tùy chọn bắt buộc |
Nếu website cần người dùng chọn chính xác một giá trị trong danh sách, select thường là lựa chọn phù hợp hơn. Ngược lại, nếu muốn hỗ trợ người dùng nhập nhanh nhưng vẫn giữ sự linh hoạt, datalist sẽ mang lại trải nghiệm tốt hơn.
Những lưu ý khi sử dụng datalist trong dự án thực tế
Khi đưa datalist vào website thực tế, không nên xem đây là giải pháp thay thế cho mọi trường hợp nhập dữ liệu. Việc sử dụng đúng hoàn cảnh sẽ giúp giao diện dễ dùng hơn và tránh gây khó khăn cho người dùng.
- Nên giới hạn số lượng gợi ý để danh sách không trở nên quá dài và khó tìm kiếm.
- Không nên đưa dữ liệu nhạy cảm hoặc thông tin cần bảo mật vào danh sách gợi ý.
- Cần kiểm tra dữ liệu người dùng nhập vào ở phía máy chủ nếu thông tin được gửi về hệ thống.
- Nên kết hợp với JavaScript khi cần xử lý dữ liệu động hoặc tạo danh sách gợi ý từ cơ sở dữ liệu.
- Cần kiểm tra khả năng hiển thị trên các trình duyệt khác nhau để đảm bảo trải nghiệm ổn định.
Datalist là một công cụ đơn giản nhưng hữu ích trong HTML, đặc biệt khi website cần cải thiện tốc độ nhập liệu mà không muốn giới hạn người dùng vào các lựa chọn cố định. Sử dụng đúng cách sẽ giúp biểu mẫu trở nên thân thiện và thuận tiện hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ datalist trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
