Pertanyaan Cara membuat kotak centang HTML dengan label yang dapat diklik


Bagaimana saya bisa membuat kotak centang HTML dengan label yang dapat diklik (ini berarti bahwa mengklik label mengaktifkan / menonaktifkan kotak centang)?


834
2018-06-09 13:33


asal


Jawaban:


Metode 1: Bungkus Label Label

Bungkus kotak centang dalam a label menandai:

<label><input type="checkbox" name="checkbox" value="value">Text</label>

Metode 2: Gunakan for Atribut

Menggunakan for atribut (cocok dengan kotak centang id):

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

CATATAN: ID harus unik di halaman!

Penjelasan

Karena jawaban lain tidak menyebutkannya, label dapat menyertakan hingga 1 input dan menghilangkan for atribut, dan akan diasumsikan bahwa itu untuk input di dalamnya.

Kutipan dari w3.org (dengan penekanan saya):

[Untuk atribut] secara eksplisit mengaitkan label yang ditentukan dengan kontrol lain. Saat ini, nilai atribut ini harus sama dengan nilai atribut id dari beberapa kontrol lain dalam dokumen yang sama. Ketika tidak ada, label yang didefinisikan terkait dengan isi elemen.

Untuk mengaitkan label dengan kontrol lain secara implisit, elemen kontrol harus berada dalam isi elemen LABEL. Dalam hal ini, LABEL hanya boleh berisi satu elemen kontrol. Label itu sendiri dapat diposisikan sebelum atau sesudah kontrol yang terkait.

Menggunakan metode ini memiliki beberapa kelebihan for:

  • Tidak perlu menetapkan id ke setiap kotak centang (hebat!).

  • Tidak perlu menggunakan atribut ekstra di <label>.

  • Area yang dapat diklik masukan juga merupakan area yang dapat diklik label, jadi tidak ada dua tempat terpisah untuk diklik yang dapat mengontrol kotak centang - hanya satu, tidak peduli seberapa jauh <input> dan teks label yang sebenarnya, dan tidak peduli apa pun jenis CSS yang Anda terapkan.

Demo dengan beberapa CSS:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}
<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>


1594
2018-06-09 13:36



Pastikan saja label terkait dengan input.

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

46
2018-06-09 13:35



Anda juga bisa menggunakan elemen pseudo CSS untuk memilih dan menampilkan label Anda dari semua atribut nilai kotak centang Anda (masing-masing).
Edit: Ini hanya akan bekerja dengan browser berbasis web dan blink (Chrome (ium), Safari, Opera ....) dan dengan demikian sebagian besar browser seluler. Tidak Firefox atau dukungan IE di sini.
Ini mungkin hanya berguna saat menyematkan webkit / blink ke aplikasi Anda.

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

Semua label elemen palsu akan dapat diklik.

Demo:http://codepen.io/mrmoje/pen/oteLl, + Inti dari itu


11
2018-01-29 17:07



<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

7
2018-06-09 13:36



<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

3
2018-06-09 13:36



Ia bekerja juga:

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>

3
2017-07-06 10:47



Ini akan membantu Anda: W3Schools - Label

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

2
2018-06-09 13:44



<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

1
2018-06-09 13:37



Menggunakan label elemen, dan for atribut untuk menghubungkannya dengan kotak centang:

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />


0
2018-06-09 13:37