Trong bài này mình sẽ hướng dẫn cách sử dụng thẻ label trong HTML, đây là thẻ dùng để tạo nhãn cho các đối tượng trong form.
1. Thẻ label là gì?
Thẻ label trong html 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.
<label for="id"></label>
Lưu ý: Thuộc tính for của thẻ label phải giống với với id của thẻ input mà nó đại diện.
Bạn có thể sử dụng thẻ span, thẻ p, hay một thẻ bất kì để bao quanh thẻ label lại. Bạn cũng có thể sử dụng CSS để tùy chỉnh cách hiện thị cho nó.
Bài viết này được đăng tại [kiso.vn]
2. Cách sử dụng thẻ label trong HTML
Ví dụ: sử dụng thẻ label để tạo nhãn cho các thẻ input.
<!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">
<label>Name:</label>
<input type="text" name="name"><br />
<label>Email:</label>
<input type="text" name="email"><br />
</form>
</body>
</html>3. Thuộc tính for của thẻ label
Như mình đã nói, thuộc tính for của thẻ label có tác dụng trỏ đến thẻ input mà nó đại diện. Giá trị của nó phải trùng với ID của thẻ input đó thì khi click vào label con trỏ sẽ tự động nhảy đến thẻ input.
Ví dụ: Sử dụng thuộc tính for cho thẻ label.
<!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">
<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ợ thẻ label
- Chrome
- Firefox
- IE
- Safari
- Opera
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ính1. Thẻ label là gì?2. Cách sử dụng thẻ...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Thẻ label là gì?2. Cách sử dụng thẻ label trong HTML3. Thuộc tính for của thẻ labelTrình duyệt hỗ trợ thẻ label1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ...
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ính1. Thẻ label là gì?2. Cách sử dụng thẻ label trong HTML3. Thuộc tính for của thẻ labelTrình duyệt hỗ trợ thẻ labelV. Phân tích và khai thác các lỗ hổng Directory traversal...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Thẻ label là gì?2. Cách sử dụng thẻ label trong HTML3. Thuộc tính for của thẻ labelTrình duyệt hỗ trợ thẻ labelV. Phân tích và khai thác các lỗ hổng Directory traversal...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Thẻ label là gì?2. Cách sử dụng thẻ label trong HTML3. Thuộc tính for của thẻ labelTrình duyệt hỗ trợ thẻ labelIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi...