Haruskah saya memasukkan elemen input ke dalam elemen label?

Apakah ada praktik terbaik tentang bersarang labeldan inputelemen HTML?

cara klasik:

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

atau

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

Dari w3: Label itu sendiri dapat diposisikan sebelum, setelah atau di sekitar kontrol terkait.

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

atau

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

atau

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

Perhatikan bahwa teknik ketiga tidak dapat digunakan saat tabel digunakan untuk tata letak, dengan label di satu sel dan bidang formulir yang terkait di sel lain.

Salah satunya valid. Saya suka menggunakan contoh pertama atau kedua, karena memberi Anda lebih banyak kontrol gaya.

saya lebih memilih

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

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

lebih

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

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

Terutama karena itu membuat HTML lebih mudah dibaca. Dan saya benar-benar berpikir contoh pertama saya lebih mudah untuk bergaya dengan CSS, karena CSS bekerja sangat baik dengan elemen bersarang.

Tapi kurasa itu masalah selera.

Jika Anda membutuhkan lebih banyak opsi gaya, tambahkan tag rentang.

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

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

Kode masih terlihat lebih baik menurut saya.

Jika Anda memasukkan tag input ke tag label, Anda tidak perlu menggunakan atribut 'untuk'.

Yang mengatakan, saya tidak suka memasukkan tag input dalam label saya karena saya pikir mereka terpisah, tidak mengandung, entitas.

Perbedaan perilaku: mengklik di antara label dan input

Jika Anda mengklik spasi di antara label dan input, ia mengaktifkan input hanya jika label berisi input.

Ini masuk akal karena dalam hal ini spasi hanyalah karakter lain dari label.

<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>

Mampu mengklik antara label dan kotak berarti:

• lebih mudah untuk mengklik
• kurang jelas dari mana segala sesuatu dimulai dan berakhir

Contoh kotak centang Bootstrap v3.3 menggunakan input di dalam: http://getbootstrap.com/css/#forms Mungkin sebaiknya Anda mengikuti mereka. Tetapi mereka berubah pikiran dalam v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios jadi saya tidak tahu lagi apa yang bijak:

Kotak centang dan penggunaan radio dibangun untuk mendukung validasi formulir berbasis HTML dan memberikan label yang ringkas dan dapat diakses. Dengan demikian, elemen <input>s dan <label>s kita merupakan elemen yang bertentangan dengan a <input>dalam <label>. Ini sedikit lebih verbose karena Anda harus menentukan id dan atribut untuk menghubungkan <input>dan <label>.

Pertanyaan UX yang membahas hal ini secara terperinci: /ux/23552/should-the-space-between-the-checkbox-and-label-be-clickable

Secara pribadi saya suka menyimpan label di luar, seperti pada contoh kedua Anda. Itu sebabnya atribut FOR ada di sana. Alasannya adalah saya akan sering menerapkan gaya ke label, seperti lebar, untuk mendapatkan bentuk agar terlihat bagus (singkatan di bawah):

<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" />

Membuatnya jadi saya bisa menghindari meja dan semua sampah di formulir saya.

Lihat http://www.w3.org/TR/html401/interact/forms.html#h-17.9 untuk rekomendasi W3.

Mereka mengatakan itu bisa dilakukan dengan cara apa pun. Mereka menggambarkan dua metode sebagai eksplisit (menggunakan "untuk" dengan id elemen) dan implisit (menanamkan elemen dalam label):

Eksplisit:

Atribut for mengaitkan label dengan kontrol lain secara eksplisit: nilai atribut for harus sama dengan nilai atribut id dari elemen kontrol terkait.

Implisit:

Untuk mengaitkan label dengan kontrol lain secara implisit, elemen kontrol harus berada di dalam konten elemen LABEL. Dalam hal ini, LABEL hanya dapat berisi satu elemen kontrol.

Keduanya benar, tetapi memasukkan input ke dalam label membuatnya jauh lebih fleksibel saat menata dengan CSS.

Pertama, a <label>dibatasi di mana elemen-elemen itu dapat mengandung . Misalnya, Anda hanya dapat meletakkan teks <div>antara <input>dan label, jika <input>tidak ada di dalam <label>.

Kedua, sementara ada solusi untuk membuat gaya lebih mudah seperti membungkus teks label bagian dalam dengan rentang, beberapa gaya akan diwarisi dari elemen induk, yang dapat membuat gaya lebih rumit.

'Gotcha' terkenal menyatakan bahwa Anda tidak boleh menyertakan lebih dari satu elemen input di dalam elemen <label> dengan atribut "untuk" eksplisit, misalnya:

<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>

Sementara ini mungkin tergoda untuk fitur formulir di mana nilai teks khusus sekunder untuk tombol radio atau kotak centang, fungsi klik-fokus dari elemen label akan segera melempar fokus ke elemen yang idnya secara eksplisit didefinisikan dalam atribut 'untuk' nya , sehingga hampir mustahil bagi pengguna untuk mengklik ke dalam bidang teks yang ada untuk memasukkan nilai.

Secara pribadi, saya mencoba menghindari elemen label dengan input anak-anak. Tampaknya tidak semestinya bagi elemen label untuk mencakup lebih dari label itu sendiri. Jika Anda memasukkan input ke label untuk mencapai estetika tertentu, Anda harus menggunakan CSS.

Seperti yang dikatakan kebanyakan orang, kedua cara itu memang bekerja, tetapi saya pikir hanya yang pertama yang harus. Karena semantik ketat, label tidak "mengandung" input. Menurut pendapat saya, hubungan penahanan (orang tua / anak) dalam struktur markup harus mencerminkan penahanan dalam output visual . yaitu, elemen yang mengelilingi yang lain di markup harus digambar di sekitar yang ada di browser . Menurut ini, label harus saudara input, bukan orang tuanya. Jadi opsi nomor dua adalah arbitrer dan membingungkan. Setiap orang yang telah membaca Zen Python mungkin akan setuju (Flat lebih baik daripada bersarang, Jarang lebih baik daripada padat, Seharusnya ada satu - dan lebih disukai hanya satu - cara yang jelas untuk melakukannya ...).

Karena keputusan seperti itu dari W3C dan vendor peramban utama (memungkinkan "dengan cara apa pun yang Anda sukai untuk melakukannya", alih-alih "melakukannya dengan cara yang benar") adalah bahwa web sangat kacau hari ini dan kami para pengembang harus berurusan dengan kusut. dan kode warisan yang sangat beragam.

Saya biasanya pergi dengan dua opsi pertama. Saya telah melihat skenario ketika opsi ketiga digunakan, ketika pilihan radio di mana tertanam dalam label dan css berisi sesuatu seperti

label input {
    vertical-align: bottom;
}

untuk memastikan penyelarasan vertikal yang tepat untuk radio.

Mengacu pada WHATWG ( Menulis antarmuka pengguna formulir ) tidak salah untuk memasukkan bidang input di dalam label. Ini menghemat kode Anda karena foratribut dari labeltidak lagi diperlukan.

Saya lebih suka membungkus elemen di dalam saya <label>karena saya tidak harus membuat id.

Saya adalah pengembang Javascript, dan React atau Angular digunakan untuk menghasilkan komponen yang dapat digunakan kembali oleh saya atau orang lain. Maka akan mudah untuk menduplikasi id di halaman, mengarah ke sana ke perilaku aneh.

Satu hal yang perlu Anda pertimbangkan adalah interaksi kotak centang dan input radio dengan javascript.

Menggunakan struktur di bawah ini:

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

Ketika pengguna mengklik "Teks teks", fungsi controlCheckbox () akan diaktifkan sekali.

Tetapi ketika tag input diklik, fungsi controlCheckbox () dapat diaktifkan dua kali di beberapa browser lama. Itu karena kedua input dan label tag memicu onclick event yang dilampirkan pada kotak centang.

Maka Anda mungkin memiliki beberapa bug di kotak centang Status Anda.

Saya mengalami masalah ini akhir-akhir ini di IE11. Saya tidak yakin apakah peramban modern bermasalah dengan struktur ini.

Keuntungan utama menempatkan inputbagian dalamlabel adalah efisiensi mengetik untuk manusia dan penyimpanan byte untuk komputer.

@Znarkus mengatakan dalam komentarnya kepada OP,

Salah satu kelebihan besar menempatkan bagian <input />dalam <label>, adalah bahwa Anda dapat menghilangkan fordan id: <label>My text <input /></label>dalam contoh Anda. Jauh lebih bagus!

Catatan: Dalam kode @Znarknus, efisiensi lain dimasukkan tidak secara eksplisit dinyatakan dalam komentar. type="text"juga dapat dihilangkan dan inputakan membuat kotak teks secara default.

Perbandingan penekanan tombol dan byte berdampingan [1].

31 penekanan tombol, 31 byte

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

58 penekanan tombol, 58 byte

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

Jika tidak, snippet secara visual sama dan mereka menawarkan tingkat aksesibilitas pengguna yang sama. Seorang pengguna dapat mengklik atau mengetuk label untuk menempatkan kursor di kotak teks.

[1] File teks (.txt) dibuat di Notepad pada Windows, byte dari properti Windows File Explorer