Những gì thuộc tính của Wikipedia cho nhóm làm gì trong thẻ <nhãn> HTML?

Tôi tự hỏi sự khác biệt giữa hai đoạn mã sau đây là gì:

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

và

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

Tôi chắc chắn rằng nó sẽ làm gì đó khi bạn sử dụng một thư viện JavaScript đặc biệt, nhưng ngoài điều đó ra, nó có xác nhận HTML hay được yêu cầu vì một số lý do khác không?

Các <label>thẻ cho phép bạn click vào nhãn, và nó sẽ được đối xử như cách nhấp vào các yếu tố đầu vào liên quan. Có hai cách để tạo liên kết này:

Một cách là bọc phần tử nhãn xung quanh phần tử đầu vào:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

Một cách khác là sử dụng forthuộc tính, cung cấp cho nó ID của đầu vào được liên kết:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

Điều này đặc biệt hữu ích để sử dụng với các hộp kiểm và nút, vì nó có nghĩa là bạn có thể kiểm tra hộp bằng cách nhấp vào văn bản được liên kết thay vì phải tự nhấn hộp.

Đọc thêm về yếu tố này trong MDN .

Các forthuộc tính liên kết nhãn với một yếu tố kiểm soát, như đã định nghĩa trong mô tả của labeltrong HTML 4,01 spec. Điều này ngụ ý, trong số những thứ khác, khi labelphần tử nhận được tiêu điểm (ví dụ: bằng cách nhấp vào), nó sẽ chuyển trọng tâm vào điều khiển liên quan của nó. Sự kết hợp giữa nhãn và điều khiển cũng có thể được sử dụng bởi các tác nhân người dùng dựa trên giọng nói, điều này có thể cung cấp cho người dùng cách hỏi nhãn liên quan là gì khi xử lý điều khiển. (Sự liên kết có thể không rõ ràng như trong kết xuất trực quan.)

Trong ví dụ đầu tiên trong câu hỏi (không có for), việc sử dụng labelđánh dấu không có ý nghĩa logic hoặc chức năng - nó vô dụng, trừ khi bạn làm gì đó với CSS hoặc JavaScript.

Thông số kỹ thuật HTML không bắt buộc phải liên kết nhãn với các điều khiển, nhưng Nguyên tắc truy cập nội dung web (WCAG) 2.0 thì có. Điều này được mô tả trong tài liệu kỹ thuật H44: Sử dụng các yếu tố nhãn để liên kết nhãn văn bản với điều khiển biểu mẫu , điều này cũng giải thích rằng liên kết ngầm (bằng cách lồng inputvào bên trong label) không được hỗ trợ rộng rãi như liên kết rõ ràng thông qua forvà idthuộc tính,

Tóm lại, những gì nó làm liên quan đến idđầu vào, đó là tất cả:

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">

Thuộc tính for của <label>thẻ phải bằng thuộc tính id của phần tử liên quan để liên kết chúng lại với nhau.

Thuộc tính for cho thấy nhãn này là viết tắt của trường đầu vào có liên quan hoặc hộp kiểm hoặc nút radio hoặc bất kỳ trường nhập dữ liệu nào khác được liên kết với nó. ví dụ

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>

Nó nhãn bất cứ điều gì đầu vào là tham số cho forthuộc tính.

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>