Thuộc tính for của thẻ <label> trong HTML

Thuộc tính for của phần tử <label> được dùng để liên kết một phần tử với một nhãn (label).

Cú pháp

Cú pháp như sau:

<label for="id">

Ở trên, id là id của phần tử liên kết.

Ví dụ

Ví dụ triển khai thuộc tính for của phần tử <label>:

<!DOCTYPE html> <html> <body> 
<h2>Kết quả học kỳ trước</h2> 
<form> 
    <fieldset> 
        <legend>Kết quả</legend> 
        <label for="stinfo">Học sinh:</label> 
        <input type="text" id="stinfo" value="Jack"><br> 
        <label for="sub">Môn học:</label> 
        <input type="text" value="Toán"><br> 
        <label for="rank">Xếp hạng:</label> 
        <input type="number" value="8"><br> 
    </fieldset> 
</form> 
</body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả như sau:

Trong ví dụ trên, chúng ta có form với một số trường:

<form> 
    <fieldset> 
        <legend>Kết quả</legend> 
        <label for="stinfo">Học sinh:</label> 
        <input type="text" id="stinfo" value="Jack"><br> 
        <label for="sub">Môn học:</label> 
        <input type="text" value="Toán"><br> 
        <label for="rank">Xếp hạng:</label> 
        <input type="number" value="8"><br> 
    </fieldset> 
</form>

Chúng ta đặt nhãn cho trường bằng thuộc tính for của <label>, ví dụ:

<label for="stinfo">Học sinh:</label> <input type="text" id="stinfo" value="Jack"><br>

Bây giờ ô input type text với id="stinfo" sẽ có nhãn "Học sinh" vì ta đã thiết lập với label for:

<label for="stinfo">Học sinh:</label>