💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Liên kết label và input
📌
Kết luận
Khớp thuộc tính for của <label> với id của <input> để liên kết chúng
📝 Mã thực tế tại đây
<label for="email">Email</label>
<input type="email" id="email" name="email">Tại sao cần có label?
Khi có nhãn (label), người dùng có thể nhấp vào phần chữ ("Email") để trỏ chuột vào ô nhập liệu. Điều này cực kỳ tiện lợi, đặc biệt là trên điện thoại di động. Hơn nữa, nó còn giúp ích cho khả năng truy cập. Phần mềm đọc màn hình sẽ thông báo: "Ô nhập liệu này dành cho Email".Một cách viết khác
📝 Mã thực tế tại đây
<label>
Email
<input type="email" name="email">
</label>input bằng thẻ label. Cách này không cần dùng for và id, nhưng việc định dạng bằng CSS có thể sẽ kém linh hoạt hơn một chút.
Tổng kết
- Liên kết label và input bằng cách khớpfor và id
- Là yêu cầu bắt buộc để trang web dễ sử dụng hơn (accessibility)
- Có thể dùng cách bao quanh để liên kết nhanh
Hãy thử trong phần bài tập
Hãy thử liên kết một label với một input nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy liên kết label 'Email' với input có id='email' bằng thuộc tính for.
Gợi ý khi gặp khó khăn
Giá trị của for trên label phải trùng với id của input.