Thẻ <datalist> có chức năng chỉ định một danh sách các tùy chọn được xác định trước cho một phần tử <input>.
Thẻ <datalist> được sử dụng để cung cấp chức năng “autocomplete” cho các phần tử <input>, người dùng sẽ thấy một danh sách thả xuống các tùy chọn trước khi họ nhập dữ liệu.
Sử dụng thuộc tính list của thẻ <input> kết hợp với thuộc tính id của thẻ <datalist> để ràng buộc.
Cách sử dụng thẻ <datalist>
Ví dụ: Sử dụng thẻ <datalist> để tạo danh sách tùy chọn trước cho thẻ input.
Bài viết này được đăng tại [kiso.vn]
<!DOCTYPE html>
<html>
<head>
<title>Học lập trình miễn phí tại kiso.vn</title>
<meta charset="utf-8">
</head>
<body>
<h1>Học lập trình miễn phí tại kiso.vn</h1>
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>
Thuộc tính của thẻ <datalist>
Thẻ <datalist> được cung cấp toàn bộ các thuộc tính Global Attributes in HTML.
Trình duyệt hỗ trợ
- Chrome 20.0
- Firefox 4.0
- IE 10.0
- Opera 9.0
Tham khảo: w3schools.com
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chínhCách sử dụng thẻ <datalist>Thuộc tính của thẻ <datalist>Trình duyệt...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chínhCách sử dụng thẻ <datalist>Thuộc tính của thẻ <datalist>Trình duyệt hỗ trợ1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chínhCách sử dụng thẻ <datalist>Thuộc tính của thẻ <datalist>Trình duyệt hỗ trợV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn...
Directory traversal vulnerabilities (phần 3)
Nội dung chínhCách sử dụng thẻ <datalist>Thuộc tính của thẻ <datalist>Trình duyệt hỗ trợV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file...
Directory traversal vulnerabilities (phần 2)
Nội dung chínhCách sử dụng thẻ <datalist>Thuộc tính của thẻ <datalist>Trình duyệt hỗ trợIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng...