Tôi có nên đặt các yếu tố đầu vào bên trong một yếu tố nhãn?

Có một thực hành tốt nhất liên quan đến việc làm tổ của labelvàinput các phần tử HTML?

cách cổ điển:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

hoặc là

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

Từ w3: Nhãn có thể được định vị trước, sau hoặc xung quanh điều khiển liên quan.

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

hoặc là

<input type="text" id="lastname" />
<label for="lastname">Last Name</label>

hoặc là

<label>
   <input type="text" name="lastname" />
   Last Name
</label>

Lưu ý rằng kỹ thuật thứ ba không thể được sử dụng khi một bảng đang được sử dụng để bố trí, với nhãn trong một ô và trường biểu mẫu liên kết của nó trong một ô khác.

Một trong hai là hợp lệ. Tôi thích sử dụng ví dụ thứ nhất hoặc thứ hai, vì nó cho phép bạn kiểm soát phong cách nhiều hơn.

tôi thích

<label>
  Firstname
  <input name="firstname" />
</label>

<label>
  Lastname
  <input name="lastname" />
</label>

kết thúc

<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />

<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />

Chủ yếu là vì nó làm cho HTML dễ đọc hơn. Và tôi thực sự nghĩ rằng ví dụ đầu tiên của tôi dễ tạo kiểu hơn với CSS, vì CSS hoạt động rất tốt với các phần tử lồng nhau.

Nhưng đó là vấn đề của hương vị tôi cho rằng.

Nếu bạn cần thêm tùy chọn kiểu dáng, hãy thêm thẻ span.

<label>
  <span>Firstname</span>
  <input name="firstname" />
</label>

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

Mã vẫn có vẻ tốt hơn theo ý kiến ​​của tôi.

Nếu bạn bao gồm thẻ đầu vào trong thẻ nhãn, bạn không cần sử dụng thuộc tính 'for'.

Điều đó nói rằng, tôi không muốn bao gồm thẻ đầu vào trong nhãn của mình vì tôi nghĩ chúng là các thực thể riêng biệt, không chứa.

Khác biệt về hành vi: nhấp vào khoảng trắng giữa nhãn và đầu vào

Nếu bạn nhấp vào khoảng trống giữa nhãn và đầu vào, nó chỉ kích hoạt đầu vào nếu nhãn chứa đầu vào.

Điều này có ý nghĩa vì trong trường hợp này, không gian chỉ là một ký tự khác của nhãn.

<p>Inside:</p>

<label>
  <input type="checkbox" />
  |&lt;----- Label. Click between me and the checkbox.
</label>

<p>Outside:</p>

<input type="checkbox" id="check" />
<label for="check">|&lt;----- Label. Click between me and the checkbox.</label>

Có thể nhấp vào giữa nhãn và hộp có nghĩa là:

• dễ bấm hơn
• ít rõ ràng hơn nơi mọi thứ bắt đầu và kết thúc

Các ví dụ về hộp kiểm Bootstrap v3.3 sử dụng đầu vào bên trong: http://getbootstrap.com/css/#forms Có thể khôn ngoan khi theo dõi chúng. Nhưng họ đã thay đổi quyết định trong v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios vì vậy tôi không biết điều gì là khôn ngoan nữa:

Các hộp kiểm và sử dụng radio được xây dựng để hỗ trợ xác thực mẫu dựa trên HTML và cung cấp nhãn ngắn gọn, dễ truy cập. Như vậy, <input>s và s của chúng ta <label>là các phần tử anh em trái ngược với một <input>bên trong a <label>. Điều này dài hơn một chút vì bạn phải chỉ định id và cho các thuộc tính để liên quan đến <input>và <label>.

Câu hỏi UX thảo luận chi tiết về điểm này: /ux/23552/should-the-space-b between-the-checkbox-and-tag-be-clickable

Cá nhân tôi thích giữ nhãn bên ngoài, như trong ví dụ thứ hai của bạn. Đó là lý do tại sao thuộc tính FOR ở đó. Lý do là tôi thường áp dụng các kiểu cho nhãn, như chiều rộng, để làm cho biểu mẫu trông đẹp hơn (tốc ký bên dưới):

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />

Làm cho nó để tôi có thể tránh các bảng và tất cả những thứ linh tinh trong các hình thức của tôi.

Xem http://www.w3.org/TR/html401/interact/forms.html#h-17.9 để biết các đề xuất W3.

Họ nói rằng nó có thể được thực hiện một trong hai cách. Họ mô tả hai phương thức là rõ ràng (sử dụng "for" với id của phần tử) và ẩn (nhúng phần tử trong nhãn):

Rõ ràng:

Thuộc tính for liên kết nhãn với điều khiển khác một cách rõ ràng: giá trị của thuộc tính for phải giống với giá trị của thuộc tính id của thành phần điều khiển được liên kết.

Ngụ ý:

Để liên kết nhãn với điều khiển khác một cách ngầm định, phần tử điều khiển phải nằm trong nội dung của phần tử LABEL. Trong trường hợp này, LABEL chỉ có thể chứa một yếu tố kiểm soát.

Cả hai đều đúng, nhưng đặt đầu vào bên trong nhãn làm cho nó kém linh hoạt hơn nhiều khi tạo kiểu bằng CSS.

Đầu tiên, a <label>bị hạn chế trong đó các phần tử có thể chứa . Ví dụ: bạn chỉ có thể đặt <div>giữa <input>văn bản nhãn và văn bản, nếu <input>không nằm trong <label>.

Thứ hai, trong khi có các cách giải quyết để tạo kiểu dễ dàng hơn như bọc văn bản nhãn bên trong bằng một khoảng, một số kiểu sẽ được kế thừa từ các phần tử cha, có thể làm cho kiểu dáng phức tạp hơn.

Một 'gotcha' đáng chú ý ra lệnh rằng bạn không bao giờ nên bao gồm nhiều hơn một yếu tố đầu vào bên trong một phần tử <nhãn> với thuộc tính "for" rõ ràng, ví dụ:

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

Mặc dù điều này có thể hấp dẫn đối với các tính năng biểu mẫu trong đó giá trị văn bản tùy chỉnh là thứ yếu đối với nút radio hoặc hộp kiểm, chức năng lấy nét nhấp của phần tử nhãn sẽ ngay lập tức tập trung vào phần tử có id được xác định rõ ràng trong thuộc tính 'for' của nó , khiến người dùng gần như không thể nhấp vào trường văn bản chứa để nhập giá trị.

Cá nhân, tôi cố gắng tránh các yếu tố nhãn với trẻ em đầu vào. Có vẻ như không phù hợp về mặt ngữ nghĩa đối với một yếu tố nhãn bao gồm nhiều hơn chính nhãn. Nếu bạn lồng các đầu vào trong nhãn để đạt được tính thẩm mỹ nhất định, bạn nên sử dụng CSS thay thế.

Như hầu hết mọi người đã nói, cả hai cách đều hoạt động thực sự, nhưng tôi nghĩ chỉ có cách đầu tiên nên làm. Nghiêm ngặt về mặt ngữ nghĩa, nhãn không "chứa" đầu vào. Theo tôi, mối quan hệ ngăn chặn (cha mẹ / con cái) trong cấu trúc đánh dấu sẽ phản ánh sự ngăn chặn trong đầu ra trực quan . tức là, một yếu tố xung quanh một yếu tố khác trong đánh dấu nên được vẽ xung quanh yếu tố đó trong trình duyệt . Theo đó, nhãn phải là anh chị em của đầu vào, không phải là cha mẹ. Vì vậy, tùy chọn số hai là tùy ý và khó hiểu. Mọi người đã đọc Zen of Python có thể sẽ đồng ý (Flat tốt hơn lồng nhau, thưa thớt tốt hơn dày đặc, nên có một-- và tốt nhất là chỉ có một cách rõ ràng để làm điều đó ...).

Do các quyết định như vậy từ W3C và các nhà cung cấp trình duyệt lớn (cho phép "bạn thích làm theo cách nào hơn", thay vì "làm đúng cách"), ngày nay web đã bị rối và chúng tôi phải phát triển vấn đề. và mã di sản rất đa dạng.

Tôi thường đi với hai lựa chọn đầu tiên. Tôi đã thấy một kịch bản khi tùy chọn thứ ba được sử dụng, khi các lựa chọn radio được nhúng trong nhãn và css có chứa một cái gì đó như

label input {
    vertical-align: bottom;
}

để đảm bảo căn chỉnh dọc phù hợp cho các đài.

Nhắc đến WHATWG ( Viết giao diện người dùng của biểu mẫu ), không có gì sai khi đặt trường đầu vào bên trong nhãn. Điều này giúp bạn tiết kiệm mã vì forthuộc tính từ labelkhông còn cần thiết.

Tôi rất thích bọc các phần tử bên trong <label>vì tôi không phải tạo id.

Tôi là một nhà phát triển Javascript và React hoặc Angular được sử dụng để tạo các thành phần có thể được tôi hoặc người khác sử dụng lại. Sau đó, thật dễ dàng để sao chép một id trong trang, dẫn đến những hành vi lạ.

Một điều bạn cần xem xét là sự tương tác của hộp kiểm và đầu vào radio với javascript.

Sử dụng cấu trúc dưới đây:

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

Khi người dùng nhấp vào chức năng "Nhãn văn bản" controlCheckbox () sẽ được kích hoạt một lần.

Nhưng khi nhấp vào thẻ đầu vào, chức năng controlCheckbox () có thể được kích hoạt hai lần trong một số trình duyệt cũ hơn. Đó là bởi vì cả thẻ đầu vào và thẻ nhãn đều kích hoạt sự kiện onclick kèm theo hộp kiểm.

Sau đó, bạn có thể có một số lỗi trong hộp kiểm của bạn.

Tôi đã gặp vấn đề này gần đây trên IE11. Tôi không chắc chắn nếu các trình duyệt hiện đại có rắc rối với cấu trúc này.

Ưu điểm chính của việc đặt inputbên tronglabel là hiệu quả gõ cho người và lưu trữ byte cho máy tính.

@Znarkus nói trong bình luận của mình với OP,

Một trong những ưu điểm lớn của việc đặt <input />bên trong <label>, là bạn có thể bỏ qua forvà id: <label>My text <input /></label>trong ví dụ của bạn. Đẹp hơn nhiều!

Lưu ý: Trong mã @Znarknus, một hiệu quả khác được đưa vào không được nêu rõ trong bình luận. type="text"cũng có thể được bỏ qua và inputsẽ hiển thị một hộp văn bản theo mặc định.

So sánh cạnh nhau của tổ hợp phím và byte [1].

31 tổ hợp phím, 31 byte

<label>My Text<input /></label>

58 tổ hợp phím, 58 byte

<label for="myinput">My Text</label><input id="myinput" />

Mặt khác, các đoạn mã bằng nhau về mặt trực quan và chúng cung cấp cùng mức độ truy cập của người dùng. Người dùng có thể nhấp hoặc chạm vào nhãn để đặt con trỏ vào hộp văn bản.

[1] Tệp văn bản (.txt) được tạo trong Notepad trên Windows, byte từ thuộc tính Windows File Explorer