Pada saat pembuatan form, kita membutuhkan kolom isian untuk berinteraksi dengan pengguna. Namun, cara berinteraksi tidak harus selalu mengharuskan pengguna memasukkan tulisan. Cara berinteraksi juga dapat dilakukan dengan klik pada mouse atau sentuhan pada suatu pilihan. Pada tutorial HTML ini kita akan mempelajari tentang cara membuat kolom isian berupa opsi pilihan. Pengguna dapat memilih salah satu pilihan di antara beberapa pilihan yang disediakan. Dalam bahasa HTML input pilihan sering disebut sebagai input radio. Mari kita mulai tutorial HTML – input pilihan.

Tutorial HTML – Input Pilihan – Bagian 15 – 5 (Bahasa Indonesia)

Input pilihan/radio merupakan salah satu jenis kolom isian untuk memilih satu jawaban dari beberapa opsi. Kolom isian ini bagaikan mengisi soal ujian pilihan berganda. Tipe kolom isian ini juga dapat diatur melalui atribut type pada tag input. Input radio dapat terdiri atas lebih dari satu input radio yang mempunyai atribut name yang sama. Atribut name menandakan input terkait terkelompok ke dalam sebuah kolom yang sama.

Kita akan memasukkan kolom isian pada form registrasi. Kita akan meminta pengguna memasukkan data tentang jenis kelamin mereka. Kita akan menggunakan input radio. Silahkan perhatikan kode berikut ini:

 

Mohon diperhatikan bahwa input hanya akan mengirimkan nilai yang diisikan di dalam value. Data kolom isian radio yang terkirim merupakan kolom isian yang terpilih.

Kode di atas akan menghasilkan hasil tampilan seperti berikut ini:

Tutorial HTML - Input Pilihan - Radio Button 1

Pilihan Awal

Pada input tulisan kita bisa memasukkan nilai awal. Nilai awal akan ditampilkan langsung ketika form ditampilkan. Namun, pada input radio/pilihan kita tidak bisa menggunakan atribut value untuk menentukan nilai awal. Kita bisa mengatur sebuah nilai awal berupa pilihan yang ditentukan sejak awal form ditampilkan. Untuk melakukan hal itu kita bisa memanfaatkan sebuah atribut checked. Atribut ini tidak membutuhkan nilai. Kita hanya perlu menambahkan atribut tersebut pada input radio yang ingin kita pilih sebagai pilihan awal.

Cara ini mirip dengan cara untuk menetapkan pilihan awal pada input ceklis. Namun, perbedaannya input pilihan ini hanya bisa memilih satu di antara pilihan yang tersedia. Bila kita memberikan atribut checked pada setiap pilihan maka pilihan yang terpilih pada tampilan adalah pilihan terakhir yang diberikan atribut checked.

Pada form registrasi kita akan memperkirakan bahwa pengunjung pria lebih banyak maka kita akan menentukan pilihan pria sebagai pilihan awalnya. Silahkan perhatikan kode berikut ini, saya akan menunjukkan cara untuk menentukan pilihan awalnya:

 

Kode di atas akan secara otomatis memilihkan pilihan pria seperti tampilan berikut ini:

Tutorial HTML - Input Pilihan - Radio Button 2

Kita cukup menambahkan atribut checked pada input radio yang kita tentukan sebagai pilihan awal. Cukup mudah bukan? Ok, selanjutnya kita akan melanjutkan pembelajaran kita ke tutorial HTML – tulisan panjang

Tutorial HTML – Input Tulisan Panjang – Bagian 15 – 6 (Bahasa Indonesia)