Trong bài viết này chúng tôi sẽ giúp các bạn tìm hiểu thông tin và kiến thức về For trong html hot nhất được tổng hợp bởi viendongshop.vn
Để liên kết phần tử <label>với một <input>phần tử, bạn cần phải cung cấp <input>một idthuộc tính. Sau <label>đó, cần một forthuộc tính giống với thuộc tính valuecủa đầu vào id:
<label for=”username”>Click me</label> <input type=”text” id=”username”>
Các forthuộc tính liên kết một <label>với một <input>yếu tố; mang lại một số ưu điểm chính: 1. Văn bản nhãn không chỉ được liên kết trực quan với đầu vào văn bản tương ứng của nó; nó cũng được liên kết với nó theo chương trình. Điều này có nghĩa là, ví dụ: trình đọc màn hình sẽ đọc nhãn khi người dùng tập trung vào phần nhập biểu mẫu, giúp người dùng công nghệ hỗ trợ dễ dàng hiểu dữ liệu nào nên được nhập. 2. Bạn có thể nhấp vào nhãn được liên kết để tập trung / kích hoạt đầu vào, cũng như chính đầu vào. Khu vực truy cập tăng lên này mang lại lợi thế cho bất kỳ ai cố gắng kích hoạt đầu vào, kể cả những người sử dụng thiết bị màn hình cảm ứng.
Ngoài ra , bạn có thể lồng <input>trực tiếp vào bên trong <label>, trong trường hợp đó thuộc tính forvà idlà không cần thiết vì liên kết là ngầm định:
<label>Click me <input type=”text”></label>
Lưu ý: Một inputcó thể được liên kết với nhiều nhãn. Khi một <label>được nhấp hoặc chạm vào và nó được liên kết với một điều khiển biểu mẫu, thì sự kiện nhấp chuột kết quả cũng được đưa ra cho điều khiển được liên kết.
Mối quan tâm về khả năng tiếp cận
Không đặt các yếu tố tương tác như neo hoặc nút bên trong nhãn. Làm như vậy, khiến mọi người khó kích hoạt đầu vào biểu mẫu được liên kết với nhãn.
Đề mục
Việc đặt các phần tử tiêu đề trong phạm vi <label>ảnh hưởng của nhiều loại công nghệ hỗ trợ, vì tiêu đề thường được sử dụng như một công cụ hỗ trợ điều hướng. Nếu văn bản của nhãn cần được điều chỉnh trực quan, hãy sử dụng các lớp CSS áp dụng cho <label>phần tử thay thế. Nếu một biểu mẫu hoặc một phần của biểu mẫu cần tiêu đề, hãy sử dụng <legend>phần tử được đặt trong a <fieldset>.
nút
Một <input>phần tử với một type=”button”tuyên bố và một thuộc tính giá trị hợp lệ không cần một nhãn liên kết với nó. Làm như vậy thực sự có thể ảnh hưởng đến cách công nghệ hỗ trợ phân tích cú pháp đầu vào của nút. Điều tương tự cũng áp dụng cho <button>phần tử.
Tham khảo: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
