Selection Field dengan Radio Button

Halo teman-teman semua. apa kabar?. semoga dalam keadaan sehat dan bahagia. Kali ini kita akan membahas Selection Field dengan Radio Button. Jika kamu belum mengikuti materi sebelumnya, silahkan kunjungi halaman kursus.

Pendahuluan

Radio button merupakan salah satu elemen form. Radio button juga masuk dalam kategori selection field. Yakni input berjenis pilihan.

Radio Button

Tag yang digunakan untuk membuat radio adalah tag input. Bila kamu ingat, maka banyak sekali jenis-jenis elemen form yang dibentuk dari tag ini. Baik lah langsung saja kita lihat tag nya.

<input type="radio" value="L" name="gender"> Laki-Laki
<input type="radio" value="P" name="gender"> Perempuan

Pada kode di atas ada dua radio dengan nama yang sama. Jadi nama radio harus sama. jika tidak maka semua bisa dipilih. Selanjutnya perhatikan atribut value. Nilai tersebutlah yang akan dikirim. Sedangkan Label Laki-Laki dan Perempuan hanya tampilan saja.

Radio Button vs Select

Kapan kamu harus memilih radio button dari pada select. Jawaban yang paling pasti adalah jika pilihan nya tidak begitu banyak. Jika pilihannya banyak. Menggunakan radio pasti tidak efisien. Karena akan memenuhi layar.

Membuat Radio Button Yang Baik

Untuk membuat radio button yang baik ada beberapa hal yang perlu ditambahkan yaitu:

• Fieldset (atau GroupBox)
• Heading atau Label

Langsung saja kita lihat contoh radio button yang baik.

<fieldset>
  <legend>Warna</legend>
  <input type="radio" value="L" name="warna"> Merah
  <input type="radio" value="P" name="warna"> Hijau
  <input type="radio" value="P" name="warna"> Biru
</fieldset>

Atribut Radio Button

Beberapa atribut penting dalam membuat radio button.

• type (type=”radio”)
• value (value=”L/P”)
• nama (name=”warna”)

Latihan

Buat sebuah form yang berisi elemen form radio button. Lakukan proses pengiriman. Kirimkan data (misal. dari radio.php) ke (misal. aksi_radio.php).

Sekian untuk materi kali ini. Jika kamu ingin kursus secara langsung, kami membuka kelas baru. Silahkan hubungi kontak kami di menu.