Kita langsung mulai praktek coding ya. Kita buka kembali file dropdown.html dari materi sebelumnya, dan kita akan belajar mengenai cara membuat radio.

Dibawah tag form, kita tambahkan tag label baru, dengan konten Makanan Favorit. Lalu kita tambahkan tag br. Setelah itu kita akan menambahkan 3 buah radio.

Untuk membuat radio kita menggunakan elemen input. Jadi kita buka tag dengan elemen input, kita tambahkan attribute type=”radio”. Setelah itu kita tambahkan attribute name=”makanan”, jadi nantinya hasil dari radio button ini akan dikirimkan ke server dengan nama variabel makanan. Dan yang terakhir kita tambahkan attribute value=”1”, jadi kalau radio ini dipilih, maka variabel makanan akan diisikan dengan nilai 1.

Kita tambahkan tag br setelah input. Lalu kita copy kode ini dan kita paste sebanyak 2 kali. Kita ubah value dari radio kedua menjadi 2, dan radio ketiga menjadi 3.

Kita lihat hasilnya di browser. Sekarang kita sudah memiliki 3 buah radio ya. Hanya saja belum ada keterangannya mengenai radio ini artinya apa. Kalau kita coba klik, bisa diperhatikan disini bahwa yang bisa dipilih hanya salah satu dari ketiga radio. Hal ini disebabkan karena ketiga radio memiliki attribute name yang sama ya.

Dan kalau kita coba pilih radio pertama dan mengirimkan ke server, maka browser akan mengirimkan nilai makanan=1, sesuai dengan attribute name dan value yang kita atur pada radio pertama.

Untuk menambahkan keterangan pada radio, kita bisa menggunakan tag label. Pertama kita tambahkan dahulu attribute id=”nasi” pada radio pertama. Setelah itu kita tambahkan tag label dengan attribute for=”nasi”, dan kita beri konten Nasi Goreng. Kita bisa ulangi proses yang sama untuk radio kedua dan ketiga, untuk Kwetiaw Goreng dan Bihun Goreng.

Kita coba refresh browser. Sekarang kita sudah memiliki 3 buah radio yang sudah diberi keterangan Nasi Goreng, Kwetiaw Goreng dan Bihun Goreng. Perhatikan disini bahwa untuk memilih label bisa juga dilakukan dengan cara mengklik labelnya ya.

Kita perhatikan kembali di kode kita, untuk penulisan kode radio ada sedikit perbedaan dengan penulisan kode input pada materi sebelumnya ya. Kalau di materi sebelumnya, label Makanan Favorit akan diberikan attribute for dan dikaitkan dengan tag input. Sedangkan disini label Makanan Favorit tidak mengunakan attribute for.

Kemudian perhatikan lagi disini bahwa kita membuat 3 buah tag input yang menggunakan attribute name yang sama, namun attribute id-nya berbeda-beda. Dan kemudian kita membuat tag label setelah tag input, dimana label tersebut menggunakan attribute for dan dikaitkan ke attribute id dari tag input sebelumnya.

Nah sekarang pertanyaannya, kapan kita menggunakan radio? Dan kapan kita menggunakan dropdown?

Kita lihat lagi di browser kita, sekarang kita sudah memiliki contoh radio dan dropdown. Fungsi dari kedua kontrol ini adalah sama ya, yaitu meminta pemakai untuk memilih salah satu dari opsi yang kita sediakan. Namun disini ada satu perbedaan yang paling besar antar radio dengan dropdown. Kalau kita lihat pada radio, semua opsi sudah langsung kelihatan di layar. Berbeda dengan dropdown, kita hanya bisa melihat opsi yang sedang terpilih. Apabila kita mengklik dropdown, barulah kita bisa melihat semua opsi yang ada.

Berdasarkan perbedaan ini, maka dropdown lebih disarankan apabila kita memberikan banyak opsi yang bisa dipilih oleh pemakai. Sedangkan radio lebih disarankan apabila jumlah opsinya hanya sedikit.

Untuk lebih jelasnya, saya sudah membuatkan contoh penggunaan dropdown dan radio. Bisa kita lihat pada bagian atas ini kita menggunakan dropdown. Jadi kontrolnya hanya memakan tempat satu baris saja. Sedangkan apabila kita klik, maka kita bisa melihat ada banyak opsi yang bisa kita pilih.

Sedangkan dibawahnya adalah contoh yang sama, hanya saja kita menggunakan radio. Karena jumlah opsinya banyak dan harus langsung ditampilkan semua, maka kita menghabiskan satu halaman hanya untuk meminta satu masukan dari pemakai. Jadi untuk kasus seperti ini, lebih baik kita menggunakan dropdown daripada radio.

Selanjutnya kita buka file contoh kedua. Disini kita bisa melihat contoh pertanyaan pilihan ganda untuk ujian koding ya. Pada bagian atas menggunakan dropdown, sedangkan pada bagian bawah menggunakan radio.

Disini kita bisa lihat bahwa apabila kita menggunakan dropdown, maka tampilan dari situs kita akan menjadi berantakan. Alasan utamanya adalah karena dropdown tidak bisa menggunakan HTML Tag untuk memberikan format pada kontennya. Sedangkan kalau kita menggunakan radio, kita bisa menggunakan tag code, dan kita bisa memberikan warna orange untuk reserved word seperti for dan if, sehingga pemakai bisa lebih jelas membaca opsi-opsi yang tersedia.

Jadi dari contoh disini, lebih baik kita menggunakan radio.

Sekarang kita kembali ke kode kita. Dan kita akan belajar mengenai cara membuat checkbox.

Kita tambahkan dahulu label baru setelah tag pembuka form. Kita isikan dengan konten Hobi. Dan kita tambahkan tag BR.

Cara membuat checkbox mirip dengan cara membuat radio. Kita buat tag baru dengan elemen Input. Kita tambahkan attribute type=”checkbox”. Lalu kita tambahkan attribute ID dan Name dengan isi koding. Dan kita tambahkan attribute value=”1”. Setelah itu kita tambahkan label dengan konten koding. Agar rapi, kita bisa tambahkan tag BR.

Ulangi proses tadi sebanyak 2 kali untuk menambahkan checkbox untuk Main Gim dan Berenang.

Kita lihat hasilnya pada browser. Sekarang kita sudah memiliki 3 opsi untuk hobi. Perbedaan dari radio dengan checkbox adalah kalau menggunakan radio kita hanya boleh memilih salah satu dari opsi yang tersedia, sedangkan kalau menggunakan checkbox kita bisa memilih lebih dari satu opsi.

Sebagai contoh apabila saya mencentang opsi Koding dan Main Gim dan menekan tombol submit. Maka browser akan mengirimkan nilai koding=1 dan gim=1 ke server. Perhatikan bahwa karena berenang tidak dicentang, maka browser tidak mengirimkan variable berenang.

Kita bisa menggunakan cara lain agar checkbox mengirimkan data berupa array ke server. Misalkan kita ubah name dari ketiga checkbox menjadi hobi[]. Perhatikan disini bahwa kita perlu menambahkan kurung siku pembuka dan kurung siku penutup agar server menangkap nilai dari variable ini sebagai array. Kemudian value harus kita ganti dengan nilai yang sesuai dengan masing-masing checkbox, misalnya saya ganti dengan koding, gim, dan berenang.

Kita tes pada browser. Kita tes apabila kita mencentang pilihan Gim dan Berenang dan menekan tombol submit. Maka browser akan mengirimkan nilai hobi[]=gim dan nilai hobi[]=berenang. Nantinya server akan menangkap nilai ini sebagai variable hobi yang tipenya array, dengan isi “gim” dan “berenang”.

Kita review kembali apa yang telah kita pelajari pada video ini.

Untuk membuat radio, kita menggunakan elemen Input. Kemudian diikuti dengan attribute type=”radio”. Kita bisa menambahkan attribute name dengan nama variable yang akan dikirim ke server, dan attribute value dengan nilai variable yang akan dikirim ke server apabila radio ini dipilih.

Ini adalah contoh kode radio yang telah kita buat dalam video ini.

Selanjutnya untuk membuat checkbox, caranya sama dengan cara membuat radio tadi ya. Kita tetap menggunakan elemen input, hanya saja attribute type-nya bernilai checkbox.

Dan ini adalah contoh kode checkbox yang barusan kita buat dalam video ini.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.