HTML Tag: datalist

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.

Code RUN
<!DOCTYPE html>
<html>
    <head>
    	<title>Học lập trình miễn phí tại freetuts.net</title>
		<meta charset="utf-8">
	</head>
    <body>
    	<h1>Học lập trình miễn phí tại freetuts.net</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

Nguồn: freetuts.net