Thuộc tính HTML for = “” trong <label> là gì?

Tôi đã thấy điều này trong jQuery - nó làm gì?

<label for="name"> text </label>
<input type="text" name="name" value=""/>

Để liên kết phần tử <label>với một <input>phần tử, bạn cần cung cấp <input>một idthuộc tính. Sau <label>đó, cần một forthuộc tính valuegiống với đầ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 đang 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à idkhô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à 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 có thể thực sự can thiệp vào 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

Các forthuộc tính được sử dụng trong nhãn. Nó đề cập đến id của phần tử mà nhãn này được liên kết với.

Ví dụ:

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

Bây giờ khi người dùng nhấp chuột vào usernamevăn bản, trình duyệt sẽ tự động đưa tiêu điểm vào trường tương ứng input. Điều này cũng hoạt động với các phần tử đầu vào khác như <textbox>và <select>.

Trích dẫn từ đặc điểm kỹ thuật :

Thuộc tính này liên kết rõ ràng nhãn đang được xác định với một điều khiển khác. Khi hiển thị, giá trị của thuộc tính này phải giống với giá trị của thuộc tính id của một số điều khiển khác trong cùng một tài liệu. Khi vắng mặt, nhãn đang được xác định được liên kết với nội dung của phần tử.

Về lý do tại sao câu hỏi của bạn được gắn thẻ jQuery và bạn thấy nó được sử dụng ở đâu trong jQuery, tôi không thể trả lời vì bạn không cung cấp nhiều thông tin.

Có thể nó đã được sử dụng trong bộ chọn jQuery để tìm phần tử đầu vào tương ứng với một phiên bản nhãn:

var label = $('label');
label.each(function() {
    // get the corresponding input element of the label:
    var input = $('#' + $(this).attr('for'));
});

Tôi thấy cần phải trả lời điều này. Tôi đã có cùng một sự nhầm lẫn.

<p>Click on one of the text labels to toggle the related control:</p>

<form action="/action_page.php">
  <label for="female">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

Tôi đã thay đổi thuộc tính for trên nhãn 'nam' thành nữ. Bây giờ, nếu bạn nhấp vào 'nam', đài 'nữ' sẽ được chọn.

Đơn giản như thế.

một ví dụ nhanh:

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

các for=""tag Hãy tập trung đầu vào khi bạn nhấp vào nhãn là tốt.

Bạn sử dụng nó với nhãn để nói rằng hai đối tượng thuộc về nhau.

<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>

Điều này cũng có nghĩa là nhấp vào nhãn đó sẽ thay đổi giá trị của hộp kiểm.

nó được sử dụng cho <label>phần tử

nó được sử dụng với hộp kiểm loại đầu vào hoặc redio để chọn khi nhấp vào nhãn

bản demo làm việc

Các forthuộc tính của <label>thẻ nên bằng với thuộc tính id của phần tử có liên quan để ràng buộc chúng lại với nhau.

FYI - nếu bạn đang ở trong môi trường sắp chữ với ví dụ:

<label for={this.props.inputId}>{this.props.label}</label>

bạn cần sử dụng htmlFor

<label htmlFor={this.props.inputId}>{this.props.label}</label>

nó được sử dụng trong <label>văn bản cho html

ví dụ.

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

Nó liên kết nhãn với một phần tử đầu vào. Các thẻ HTML nhằm truyền đạt ý nghĩa đặc biệt cho người dùng thuộc nhiều danh mục khác nhau. Đây là nhãn có nghĩa là:

1. Đối với người khuyết tật vận động (cũng như đối với người dùng chuột nói chung) : Có thể nhấp vào các thẻ nhãn được sử dụng đúng cách để truy cập điều khiển biểu mẫu được liên kết. Ví dụ. Thay vì đặc biệt nhấp vào hộp kiểm, người dùng có thể nhấp vào nhãn dễ nhấp hơn và chuyển đổi hộp kiểm.
2. Đối với người dùng có thách thức về thị giác: Người dùng bị thách thức về thị giác sử dụng trình đọc màn hình để đọc thẻ nhãn được liên kết bất cứ khi nào điều khiển biểu mẫu được tập trung. Nó giúp người dùng biết nhãn mà họ không nhìn thấy được.

Thông tin thêm về ghi nhãn -> https://www.w3.org/TR/WCAG20-TECHS/H44.html

Đó là thuộc tính cho <label>thẻ: http://www.w3schools.com/tags/tag_label.asp