#55 membuat checkbox dan tombol radio pada html
pada tutorial kali ini kita akan mempelajari cara membuat checkbox dan tombol radio pada html. tutorial lanjutan dari mengenal atribut input html.
Deskripsi
checkbox atau kotak centang adalah kotak persegi yang dicentang saat di aktifkan.
tombol radio adalah tampilan tombol yang ditampilkan sebagai lingkaran kecil yang diisi atau disorot saat dipilih.
checkbox dan tombol radio ditulis dengan tag <input>. penulisan sintaks paling sederhana kotak centang atau tombol radio dengan elemen input <input> dengan atribut type checkbox atau radio.
<input type="checkbox">
<input type="radio">Code language: HTML, XML (xml)tampilan diatas tombol radio muncul sebagai lingkaran ( tidak dicentang ) atau lingkaran penuh ( dicentang ).
kotak centang muncul sebagai kotak (tidak dicentang) atau kotak terisi (dicentang)
fungsi checkbox yang memiliki nilai tunggal digunakan untuk satu opsi seperti pertanyaan ya atau tidak. contohnya remember me untuk mengingat kata sandi, subscribe to newsletter untuk berlangganan atau accept privacy untuk menyetujui kebijakan privasi.
<!DOCTYPE html>
<html>
<head>
<title> checkbox tunggal pada html </title>
</head>
<body>
<label>
<input type="checkbox"> Remember me
</label>
<hr />
<br>
<label>
<input type="checkbox"> Subcribe to newsletter
</label>
<hr />
<br>
<label>
<input type="checkbox"> I agree to privacy policy
</label>
<hr />
</body>
</html>Code language: HTML, XML (xml)
kotak centang bersifat independen artinya pengguna dapat memilih sebanyak mungkin pilihan yang mereka inginkan dalam sekelompok kotak centang.
jadi mencentang satu kotak centang tidak menghapus centang pada kotak centang lainnya di grup kotak centang
<!DOCTYPE html>
<html>
<head>
<title> checkbox multiple pada html </title>
</head>
<body>
Apa hobi kamu ?
<hr>
<input type="checkbox" name="hobi1" value="membaca" />membaca
<br />
<input type="checkbox" name="hobi2" value="menulis" />menulis
<br />
<input type="checkbox" name="hobi3" value="berenang" />berenang
<br />
<input type="checkbox" name="hobi4" value="futsal" />futsal
</body>
</html>Code language: HTML, XML (xml)
ketika saya memilih “membaca” dan “menulis” maka value yang akan terkirim adalah “membaca” dan “menulis”
sedangkan tombol radio biasanya dikelompokan dari beberapa tombol radio yang di identifikasikan menggunakan atribut name dan nilai atribut name yang sama pada semua tombol.
jika ingin menggunakan satu tombol radio mungkin lebih baik menggunakan kotak centang.
pemilihan tombol radio bersifat eklusif, artinya pengguna hanya dapat memilih satu pilihan dari sekelompok tombol radio.
saat tombol dicentang, tombol radio lain dengan nama yang sama yang sebelumnya dicentang menjadi tidak dicentang.
<!DOCTYPE html>
<html>
<head>
<title> radio button pada html </title>
</head>
<body>
<input type="radio" name="warna" id="kuning" value="kuning"> Kuning <br>
<input type="radio" name="warna" id="hijau" value="hijau"> Hijau <br>
<input type="radio" name="warna" id="biru" value="biru"> Biru
</body>
</html>Code language: HTML, XML (xml)
tombol radio mirip dengan kotak centang, tetapi perbedaannya tombol radio dirancang untuk memilih satu nilai dari satu grup, sedangkan kotak centang memungkinkan kita mengaktifkan dan menonaktifkan nilai tunggal.
tombol radio memungkinkan satu untuk dipilih dari semuanya, sedangkan kotak centang memungkinkan memilih beberapa nilai.
Atribut checkbox dan tombol radio
checkbox dan tombol radio memiliki sejumlah atribut untuk mengontrol perilakunya:
value
seperti pada elemen masukan lainnya, atribut value menentukan nilai string yang akan dikaitkan dengan tombol saat pengiriman formulir.
jadi nilai yang dikirimkan ke server merupakan nilai atribut value.
checked
Atribut yang dicentang menentukan status awal kotak centang atau tombol radio. checked adalah atribut boolean yang menunjukan apakah tombol radio atau checkbox merupakan item pilihan default dari beberapa pilihan.
cara yang valid untuk menentukan tombol radio yang dicentang:
<!DOCTYPE html>
<html>
<head>
<title> atribut checked input pada html </title>
</head>
<body>
<input type="radio">
<input type="checkbox">
<input type="radio" checked>
<input type="checkbox" checked="">
<input type="radio" checked="checked">
<input type="checkbox" checked="ChEcKeD">
</body>
</html>Code language: HTML, XML (xml)
diatas merupakan tampilan default yang belum dipilih dan sudah dipilih.
tag tambahan penerapan tombol checkbox dan tombol radio
label
Label digunakan untuk memberikan konteks pada tombol dan menunjukkan kepada pengguna untuk apa setiap tombol tersebut, masing-masing tombol harus memiliki label.
bungkus input menggunakan<label> untuk membuat label dapat diklik, jadi Anda memilih tombol yang sesuai. Contoh:
<!DOCTYPE html>
<html>
<head>
<title> label input pada html </title>
</head>
<body>
<label>
<input type="checkbox" name="setuju" value="setuju"> Setuju
</label>
<br />
<label>
<input type="radio" name="warna" value="merah"> Merah
</label>
</body>
</html>Code language: HTML, XML (xml)atau dengan atribut for yang disetel ke atribut id dari input:
<!DOCTYPE html>
<html>
<head>
<title> label atribut for input pada html </title>
</head>
<body>
<input type="checkbox" name="setuju" value="setuju" id="setuju">
<label for="setuju">Setuju</label>
<br />
<input type="radio" name="warna" value="merah" id="merah">
<label for="merah">Merah</label>
</body>
</html>Code language: HTML, XML (xml)grup tombol
Karena setiap tombol radio mempengaruhi yang lain dalam grup, biasanya memberikan label atau konteks untuk seluruh grup tombol radio.
Untuk memberikan label seluruh grup, tombol radio harus disertakan dengan elemen <legend> di dalamnya.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title> fieldset input pada html </title>
</head>
<body>
<fieldset>
<legend>Pilih warna:</legend>
<p>
<input type="radio" name="warna" value="merah" id="merah">
<label for="merah">Merah</label>
</p>
<p>
<input type="radio" name="warna" value="kuning" id="kuning">
<label for="kuning">Kuning</label>
</p>
<p>
<input type="radio" name="biru" value="biru" id="biru">
<label for="biru">Biru</label>
</p>
</fieldset>
<fieldset>
<legend>Pilih hobi:</legend>
<p>
<input type="checkbox" name="hobi1" value="menulis" id="menulis">
<label for="menulis">Menulis</label>
</p>
<p>
<input type="checkbox" name="hobi2" value="membaca" id="membaca">
<label for="membaca">Membaca</label>
</p>
<p>
<input type="checkbox" name="hobi3" value="menggambar" id="menggambar">
<label for="menggambar">Menggambar</label>
</p>
</fieldset>
</body>
</html>Code language: HTML, XML (xml)Perlu diingat bahwa kotak centang tidak boleh memiliki nama yang sama karena tidak saling eksklusif. Melakukan hal ini akan mengakibatkan formulir mengirimkan beberapa nilai untuk kunci yang sama dan tidak semua bahasa sisi server menangani ini dengan cara yang sama. Setiap kotak centang harus memiliki nama unik.
Pencarian di thohirdev:
- checked checkbox html
- input checkbox html
- fungsi dari checkbox input
- cara membuat radio button