Cara Membuat Radio Button di HTML

Kembali lagi hari ini saya akan membagikan cara membuat radio button di html. Radio button adalah salah satu komponen penting di html. Komponen ini sering digunakan pada pengisian form online, misalnya memilih pilihan jurusan, jenis kelamin dan lainnya.

Rules pada komponen radio button adalah user hanya dapat memilih salah satu dari beberapa pilihan berdasarkan pertanyaan yang diajukan. Contohnya jenis kelamin, user hanya dapat memilih salah satu jenis kelamin yang tersedia dan tidak boleh memilih lebih dari satu jenis kelamin. Jadi pastikan kalian harus mengerti dulu ya penggunaan radio button ini, dan tidak salah menggunakannya.

Membuat Radio Button di HTML

Komponen radio button dapat kita buat menggunakan tag <input> dengan tipe radio. Berikut ini contohnya:

<input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki<br>
<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan<br>

Mengenal Atribut Pada Radio Button

Terdapat 3 atribut penting yang secara umum akan sering kita gunakan pada komponen radio button ini.

Atribut Name

Untuk mendefinisikan suatu pilihan radio button berada pada group yang sama maka harus memiliki atribut name yang sama. Jika kalian membuat dengan name yang berbeda maka, secara otomatis sistem akan menganggap radio button tersebut adalah radio button dengan group yang berbeda.

Baca juga : Cara membuat button di html

Contoh pada radio button diatas kita membuat group radio button untuk jenis kelamin, yang mana terdapat 2 buah radio button dengan nilai (value) yang berbeda (laki-laki dan perempuan) namun masih dalam group yang sama, karena sama-sama memiliki atribut name yang sama yaitu jenis_kelamin.

Atribut Value

Selain atribut name, yang menjadi poin penting lainnya adalah atribut value. Nilai dari atribut ini tidak akan ditampilkan ke user tetapi nantinya akan dikirim ke server (jika kalian menggunakan pemrograman PHP atau javascript) untuk mengidentifikasi radio button manakah yang dipilih. Jadi pastikan nilai dari atribut value benar-benar memberikan informasi yang unik dan tepat untuk peng-identifikasian setiap radio buttonnya.

Atribut Checked

Atribut checked digunakan untuk menandai dipilih atau tidaknya suatu radio button. Atribut ini adalah atribut optional karena hanya akan digunakan pada kasus tertentu dan digunakannya pun disisi programmernya bukan user yang menggunakan aplikasi.

<input type="radio" name="jenis_kelamin" value="Laki-laki" checked> Laki-laki<br>
<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan<br>

Lihat pada contoh diatas, radio button untuk laki-laki diberi atribut checked, sehingga ketika dijalankan dibrowser radio button tersebut ada dalam kondisi terpilih.

Radio button yang kita buat masih sangat standar ya, belum memiliki style sama sekali. Tutorial selanjutnya akan saya buatkan radio button dengan style CSS nya. Selain CSS yang dapat kita buat sendiri, kita juga bisa menggunakan CSS dari bootstrap untuk membuat radio button dengan tampilan style yang lebih menarik. Oleh sebab itu stay trus ya di blog ini.

Artikel Lainnya : Style CSS pada html

Kalau begitu sekian artikel kali ini mengenai cara membuat radio button di html. Semoga bermanfaat buat teman-teman semuanya.