Nếu thông số biểu mẫu w3.org HTML5 tổ chức <input> bên trong bố mẹ <label>, tại sao hầu hết các trang đều triển khai chúng dưới dạng anh chị em?

Question

Tôi đã đọc w3.org HTML5 form spec, và rất ngạc nhiên khi nhìn thấy đoạn HTML sau:

<p><label>Customer name: <input name="custname"></label></p> 
<p><label>Telephone: <input type=tel name="custtel"></label></p> 
<p><label>E-mail address: <input type=email name="custemail"></label></p> 

Ngữ nghĩa, này bối rối cho tôi. Sẽ không phải là <label> có ý nghĩa hơn với tư cách là anh chị em đối với một số <input>, chứ không phải là cha mẹ của nó?

Trong môi trường tự nhiên, tôi đã sử dụng hơn để nhìn thấy những cấu hình sau:

<p> 
    <label for="customer_name">Customer name:</label> 
    <input id="customer_name" name="customer[name]"> 
</p> 

Tôi biết phần lớn các đánh dấu lên đó bị thay đổi, nhưng tôi quan tâm để nghe suy nghĩ của người khác trên những gì quy ước thích hợp nên được.

Tôi đã sửa chữa, nhưng dường như mọi trình tạo mã đánh dấu và trình trợ giúp biểu mẫu tôi đã sử dụng cơ bản vi phạm các đề xuất của W3 - ngay cả những đề xuất xác nhận hỗ trợ HTML5, sử dụng xác thực phía máy khách và tương tự.

Suy nghĩ?

Answer 1

Cả hai hình thức có hiệu lực, mỗi spec:

Các cho thuộc tính có thể được xác định để chỉ ra một điều khiển biểu mẫu mà chú thích là có liên quan. 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ó liên quan đến biểu mẫu 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ó một 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ó liên quan đến biểu mẫu có nhãn, thì phần tử đó là điều khiển được gắn nhãn của phần tử nhãn.

Nếu thuộc tính for không được chỉ định, nhưng phần tử nhãn có phần tử có liên quan đến biểu mẫu có thể gắn nhãn, thì hậu duệ đầu tiên trong thứ tự cây là điều khiển được gắn nhãn của phần tử nhãn.

Bạn có thể sử dụng lồng nhau, nếu điều đó có ý nghĩa đối với đánh dấu của bạn hoặc sử dụng thuộc tính cho nếu bạn không thể sử dụng lồng ẩn ngầm. Không nhiều hay ít chính xác hơn cái kia. Tôi cho rằng hầu hết mọi người đều ủng hộ việc sử dụng thuộc tính này vì điều đó cho phép tác giả linh hoạt nhất bằng cách cho phép hai phần tử được tách rời nhau.

Answer 2

Bên dưới đó nó nói:

Nhãn đại diện cho một chú thích trong một giao diện người dùng. Chú thích có thể là được liên kết với điều khiển biểu mẫu cụ thể, được gọi là điều khiển có nhãn có nhãn, hoặc sử dụng cho thuộc tính hoặc bằng cách đặt điều khiển biểu mẫu bên trong phần tử nhãn.

Cách lồng nhau thường ít thực tế hơn, có thể tách biệt nhãn và đầu vào thường hữu ích (ví dụ: khi sử dụng cột trong biểu mẫu).

Answer 3

Ở đây nó được rất tốt explained- http://blog.paciellogroup.com/2011/07/html5-accessibility-chops-form-control-labeling/