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.
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
- 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)
Minimarket
Atribut 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
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
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).