Thẻ datalist trong HTML
Bùi Tấn Lực - 370
- 27/09/2025
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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 ý.
Bao gồm thẻ mở <datalist> và thẻ đóng </datalist> bao quanh các thẻ option.
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>
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 *
