Thuộc tính cho đối với thẻ HTML là gì?

Question

<label id="label1" for="txtTextBox"> 

tác động của nhãn1 là gì nếu tôi đặt thuộc tính for trong đó?

Answer 1

Nó cho phép bạn tạo nhãn được gắn với phần tử cụ thể trong DOM. Khi nhãn nhận được sự kiện chuột, nó sẽ tập trung vào phần tử được gắn vào.

<label for="username">Username:</label> 
<input type="text" id="username" name="username" /> 

Khi người dùng nhấp vào văn bản "Tên người dùng:", nó sẽ tập trung vào hộp văn bản.

Điều này cũng tốt cho khả năng truy cập vì trình đọc màn hình sẽ đọc HTML bên trong của nhãn trước khi đọc trường nhập, bất kể thứ tự vật lý chúng xuất hiện trong DOM.

Answer 2

Nó đề cập đến các id (không name!) Của phần tử biểu mẫu (đầu vào, chọn, văn bản, tùy chọn, v.v.) mà nó là nhãn. Ý nghĩa của việc này là sử dụng for cho phép người dùng nhấp vào nhãn và có phần tử biểu mẫu liên quan được tập trung.

Answer 3

Theo W3C,

Thuộc tính cho có thể được chỉ định để biểu thị điều khiển biểu mẫu có liên kết phụ đề. Nếu thuộc tính được chỉ định, giá trị của thuộc tính phải là ID của phần tử có thể gắn nhãn trong cùng một Tài liệu với phần tử nhãn.

Nếu thuộc tính được chỉ định và có phần tử trong Tài liệu có ID bằng với giá trị của thuộc tính và phần tử đầu tiên là phần tử có thể gắn nhãn, thì phần tử đó là điều khiển được gắn nhãn của phần tử nhãn.

https://dev.w3.org/html5/spec-preview/the-label-element.html#attr-label-for

Một trong những lợi ích của nó được nhấn trên nhãn sẽ được gắn liền yếu tố đầu vào tập trung,

Trong trường hợp của Checkbox HOẶC nút Radio, nhấp vào Label sẽ Kiểm tra Checkbox/Radio nhưng nó không không gian che giữa nội dung nhãn và hộp/radio

<input type="radio" name="gender" id="male" value="male"> 
<label for="male">Male</label> 

<input type="radio" name="gender" id="female" value="female"> 
<label for="female">Female</label> 

yo u có thể đạt được điều tương tự bằng cách làm như thế này:

<label><input type="radio" name="gender" id="male" value="male"> Male </label> 
    <label><input type="radio" name="gender" id="female" value="female"> Female</label> 

nhưng thực tế điều này là đáng tranh cãi, tôi thích thứ hai cho Checkbox/Radio vì nó cũng bao gồm không gian giữa nhãn và hộp/radio.

Answer 4

Có vẻ như HTML5 specs deffines 2 cách < nhãn> sử dụng thẻ và tất cả các trình duyệt chính hỗ trợ cả việc mở rộng vùng có thể nhấp vào Nhãn và tập trung Điều khiển.

a) kiểm soát được lồng bên trong Label

b) Label được liên kết vào Control với cho & id thuộc tính

<!-- Method a: nested --> 
 
<p> 
 
    <label> 
 
     Username1: 
 
     <input type="text" id="name_user" name="nameuser" /> 
 
    </label> 
 
</p> 
 

 
<!-- Method b: linked --> 
 
<p> 
 
    <label for="user_name">Username2: </label> 
 
    <input type="text" id="user_name" name="username" /> 
 
</p>

Sự khác biệt duy nhất tôi đã tìm thấy giữa cả hai phương pháp là Liên kết Nhãn để Kiểm soát (Phương pháp b) cho phép bạn tách Nhãn và Điều khiển trong bố cục của bạn, ví dụ, trong 2 ô bảng khác nhau.