HTML Tag: label

Thẻ label có tác dụng đặt nhãn để mô tả cho thẻ input.

Thực chất thẻ label không hiển thị bất cứ thứ gì đặc biệt cho người dùng, tuy nhiên khi click vào nội dung bên trong thẻ label, con trỏ chuột sẽ tự động nhảy vào phần tử mà thẻ label đó đại diện.

Thuộc tính for của thẻ label phải bằng với id của thẻ input mà nó đại diện.

Cách sử dụng thẻ label

Ví dụ: sử dụng thẻ label để tạo nhãn cho các 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">
			<label>Name:</label>
			<input type="text" name="name"><br />
			<label>Email:</label>
			<input type="text" name="email"><br />
		</form>
	</body>
</html>

Thuộc tính for của thẻ label

Ví dụ: sử dụng thuộc tính for cho thẻ label.

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">
			<label for="name">Name:</label>
			<input type="text" id="name" name="name"><br />
			<label for="email">Email:</label>
			<input type="text" id="email" name="email"><br />
		</form>
	</body>
</html>

Trình duyệt hỗ trợ

  • Chrome
  • Firefox
  • IE
  • Safari
  • Opera

Nguồn: freetuts.net