❮ HTML type attribute
Example
Radio buttons let a user select only one of a limited number of choices:
HTML
CSS
JavaScript
Try it Yourself »
Definition and Usage
The defines a radio button.
Radio buttons are normally presented in radio groups [a collection of radio buttons describing a set of related options]. Only one radio button in a group can be selected at the same time.
Note: The radio group must have share the same name [the value of the name
attribute] to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.
Note: The value
attribute defines the unique
value associated with each radio button. The value is not shown to the user, but is the value that is sent to the server on "submit" to identify which radio button that was selected.
Tip: Always add the tag for best accessibility practices!
Browser Support
type="radio" | Yes | Yes | Yes | Yes | Yes |
Syntax
❮ HTML type attribute
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.
Komponen radio button dapat kita buat menggunakan tag dengan tipe radio. Berikut ini contohnya:
Laki-laki
Perempuan
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.
Laki-laki
Perempuan
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.