Apa elemen html untuk membuat sebuah checkbox?

Question

HTML elemen tag merupakan tag pada HTML yang digunakan untuk menciptakan bidang formulir yang memungkinkan pengguna dalam memasukkan entry data. HTML elemen tag memiliki jenis dan bentuk yang cukup beragam sesuai dengan kebutuhannya. Jenis input ditetapkan di dalam atribut type. Nilai type yang ditawarkan seperti text, email, password, date, radio dan lainnya.

Table of Contents Show

Radio Button
Apa itu checkbox HTML?
Apa yang dimaksud check box pada elemen form?
Apa saja elemen input?
Apa fungsi dari menu checkbox?

Hai semua, sebelumnya kita telah membahas sedikit mengenai membuat form pada html, kali ini kita akan membahas mengenai type input yang lain yaitu Radio Button dan Checkbox.

Contents

Radio Button

Kapan kita perlu menggunakan Radio Button?

Radio button biasa digunakan untuk input dimana user harus memilih 1 pilihan dari beberapa pilihan yang tersedia
Contohnya seperti pilihan gender, pemilihan metode pembayaran dan lainnya

Bagaimana cara membuat Radio Button?

Untuk membuat input Radio Button kita bisa menggunakan tag <input type="radio"> dengan atribute type = radio
Kita juga bisa menambahkan atribut checked untuk membuat salah satu radio button menjadi default value

Extra Info: ada juga penambahan atribut checked yang digunakan sebagai pilihan default

<form>
    <label>Silahkan pilih metode pembayaran:</label>
    <br>
    <input type="radio" id="ewallet" checked> 
    <label for="ewallet">E-Wallet</label> 
    <br>

    <input type="radio" id="tranfer_bank"> 
    <label for="tranfer_bank">Transfer Bank</label> 
    <br>

    <input type="radio" id="cod"> 
    <label for="cod">COD (Cash On Delivery)</label> 
    <br>

    <input type="radio" id="minimarket"> 
    <label for="minimarket">Minimarket</label> 
</form>

Oh ya, masih ingatkah kalian dengan tag <label> dan atribut for?
Kita sebelumnya telah mempelajarinya di Membuat Form pada HTML
Mari sedikit mengulas
Jadi atribut for pada tag <label> memungkinkan user ketika menekan label untuk mengarah ke sesuatu
Misal ketika user menekan teks Laki Laki, maka radio button akan terpilih
nilai pada atribut for diisi dengan id pada elemen yang dituju

Untuk hasilnya bisa dilihat dibawah ini:

Silahkan pilih metode pembayaran:
 E-Wallet
 Transfer Bank
 COD (Cash On Delivery)
 MinimarketAtribut name
Ketika kita mencoba memilih pilihan, pada radio button menunjukkan bahwa kita dapat memilih semua pilihan
Apa yang salah?
Hal ini karena kita belum menambahkan atribut name
Atribut name="user_gender" digunakan untuk mengelompokkan antara 2 atau lebih radio button
Kemudian terdapat atribute value="laki_laki" nilai inilah yang akan diterima dan diolah dibagian backend ketika user memilih radio button dengan <form>
    <label>Gender:</label>
    <br>
    <input type="radio" id="laki" name="user_gender" value="laki_laki"> 
    <label for="laki">Laki Laki</label> 
    <br>
    <input type="radio" id="perempuan" name="user_gender" value="perempuan"> 
    <label for="perempuan">Perempuan</label> 
    <br>
</form>
0
<form>
    <label>Gender:</label>
    <br>
    <input type="radio" id="laki" name="user_gender" value="laki_laki"> 
    <label for="laki">Laki Laki</label> 
    <br>
    <input type="radio" id="perempuan" name="user_gender" value="perempuan"> 
    <label for="perempuan">Perempuan</label> 
    <br>
</form>
Berikut adalah hasil dari kode di atas
Gender:
 Laki Laki
 Perempuan
Checkbox
Kapan kita perlu menggunakan Checkbox?
Checkbox digunakan untuk memilih 0 atau beberapa pilihan sekaligus
Contohnya untuk pilihan hobi user, pilihan barang yang ingin dibayar pada keranjang toko online, mengatur filter pencarian dan lainnya.
Bagaimana cara membuat input Checkbox?
Untuk membuat checkbox kita dapat menggunakan tag <form>
    <label>Gender:</label>
    <br>
    <input type="radio" id="laki" name="user_gender" value="laki_laki"> 
    <label for="laki">Laki Laki</label> 
    <br>
    <input type="radio" id="perempuan" name="user_gender" value="perempuan"> 
    <label for="perempuan">Perempuan</label> 
    <br>
</form>
1 dengan atribut type=”checkbox”
Sama seperti radio button, kita dapat mengelompokkan checkbox dengan menggunakan <form>
    <label>Gender:</label>
    <br>
    <input type="radio" id="laki" name="user_gender" value="laki_laki"> 
    <label for="laki">Laki Laki</label> 
    <br>
    <input type="radio" id="perempuan" name="user_gender" value="perempuan"> 
    <label for="perempuan">Perempuan</label> 
    <br>
</form>
2
Kemudian pemberian nilai atribut <form>
    <label>Gender:</label>
    <br>
    <input type="radio" id="laki" name="user_gender" value="laki_laki"> 
    <label for="laki">Laki Laki</label> 
    <br>
    <input type="radio" id="perempuan" name="user_gender" value="perempuan"> 
    <label for="perempuan">Perempuan</label> 
    <br>
</form>
3dalam satu grup harus unik, karena nilai tersebut digunakan untuk diolah pada backend
<form>
    <label>Pilih Hobi yang anda sukai:</label>
    <br>
    <input type="checkbox" name="user_hobi" value="ngoding" id="hobi_ngoding"> 
    <label for="hobi_ngoding">Ngoding</label> 
    <br>
    
    <input type="checkbox" name="user_hobi" value="desain" id="hobi_desain"> 
    <label for="hobi_desain">Desain</label>  
    <br>
    
    <input type="checkbox" name="user_hobi" value="olahraga" id="hobi_olahraga"> 
    <label for="hobi_olahraga">Olahraga</label>   
    <br>
</form>
Hasil input menggunakan type checkbox:
Pilih Hobi yang anda sukai:
 Ngoding
 Desain
 Olahraga
Kesimpulan
Masih pada ingatkah perbedaan dari Radio Button dan Checkbox pada HTML? ya jadi kita menggunakan radio button ketika kita perlu user memilih salah 1 pilihan dari beberapa pilihan yang tersedia. Sedangkan checkbox digunakan ketika user dapat memilih beberapa pilihan sekaligus atau tidak memilih sama sekali (0-n).
 
Apa itu checkbox HTML?
Checkbox adalah jenis inputan yang cara memilihnya adalah dengan cara mencentang, sehingga memungkinkan user dapat memilih lebih dari satu pilihan.
Apa yang dimaksud check box pada elemen form?
Checkbox digunakan ketika memerlukan form yang dapat memilih lebih dari satu pilihan. Drop-down box, biasanya digunakan ketika memilih satu pilihan diantara banyak pilihan.
Apa saja elemen input?
Terdapat berbagai macam jenis elemen input di dalam form:.
 password..
 textarea..
 select..
 select multiple..
 checkbox..
 radio..
 
Apa fungsi dari menu checkbox?
Kotak centang memungkinkan pengguna untuk memilih satu atau beberapa opsi dari suatu kumpulan. Biasanya, Anda harus menampilkan setiap opsi kotak centang dalam daftar vertikal. Untuk membuat setiap opsi kotak centang, buat CheckBox dalam tata letak Anda.