Cara membuat radio button di bootstrap

❮ HTML type attribute

Example

Radio buttons let a user select only one of a limited number of choices:








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

Attribute
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

Cara membuat radio button di bootstrap

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

Cara membuat radio button di bootstrap

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.