06/04/2021, 14:49

hẻ datalist trong HTML - Các thẻ HTML

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

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

Bùi Văn Nam

27 chủ đề

7090 bài viết

Cùng chủ đề
0