Thẻ datalist trong HTML

• Bùi Tấn Lực
• 27
• 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:

Thẻ datalist trong HTML

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.

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>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ datalist trong HTML.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thẻ datalist trong HTML
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 *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn