Belajar HTML Part 22 Cara Membuat Radio Button di Form HTML
Jika dalam tutorial sebelumnya kita telah membahas mengenai cara membuat checkbox di form HTML, dimana dengan checbox anda dapat membuat inputan yang bisa dipilih lebih dari satu, nah dalam turorial kali ini kita akan membahas mengenai cara membuat radio button di form HTML , waduh apalagi itu ?? baik langsung saja kita mulai pembahasannya dalam tutorial dibawah ini.
Video Tutorial Belajar HTML – Membuat Radio Button di Form HTML
Inputan dengan type Radio digunakan untuk membuat inputan dengan bentuk pilihan, berbeda dengan checkbox yang bisa memilih lebih dari satu, untuk input type radio ini user hanya bisa memilih satu saja, inputan ini biasanya digunakan untuk pemilihan jenis kelamin ataupun agama, baik langsung saja contohnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Jenis Kelamin</p> <p><input type='radio' name='jenis_kelamin' value='pria' />Pria</p> <p><input type='radio' name='jenis_kelamin' value='perempuan' />Perempuan</p> <input type='submit' name='tombol' value='Kirim' /> </form> </body> </html> |
baik penjelasannya seperti berikut ini :
- type=’radio’ untuk type gunakan radio karena inputan ini bertipekan radio button
- untuk bagian name kita harus menggunakan nama yang sama pada pilihan yang dibuat karena nantinya user hanya bisa memilih satu pilihan saja.
- value digunakan untuk memberikan nilai pada masing – masing inputan yang di pilih
- karakter Pria dan Perempuan adalah karakter yang ditampilkan di browser yang menjadi keterangan pada inputan.
Attribute checked
attribute ini digunakan untuk memberikan nilai default pada inputan ini yang otomatis akan terpilih ketika form ditampilkan.
cara penggunaannya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p>Jenis Kelamin</p> <p><input type='radio' name='jenis_kelamin' value='pria' checked='checked' />Pria</p> <p><input type='radio' name='jenis_kelamin' value='perempuan' />Perempuan</p> <input type='submit' name='tombol' value='Kirim' /> </form> </body> </html> |
dengan menambahkan attribute checked pada bagian pilihan Pria, otomatis pilihan pria akan terpilih saat form di akses.
Attribute disabled
Attribute ini digunakan untuk menonaktifkan fungsi dari inputan ini, attribute ini biasanya akan dipadukan dengan javascript, nah untuk menggunakan attribute ini silahkan anda menambahkan skrip disabled=’disabled’
contohnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get" > <p>Jenis Kelamin</p> <p><input type='radio' name='jenis_kelamin' value='pria' checked='checked' />Pria</p> <p><input type='radio' name='jenis_kelamin' value='perempuan' disabled='disabled' />Perempuan</p> <input type='submit' name='tombol' value='Kirim' /> </form> </body> </html> |
pada inputan type radio anda juga dapat menggunakan attribute id dan class yang digunakan untuk memanipulasi tampilan dengan css dan javascript.
|
1 |
<p><input type='radio' name='jenis_kelamin' value='pria' id='abc' class='def' />Pria</p> |
nah bagaimana mudah kan, anda dapat dengan mudah membuat inputan yang hanya memperbolehkan memilih satu pilihan seperti contohnya jenis kelamin dan agama, baik sekian dulu tutorial cara membuat radio button di form HTML, dalam tutorial selanjutnya kita akan membahas mengenai cara membuat inputan untuk file, yang biasanya kita gunakan sebagai fasilitas upload file, sekian dulu tutorial kali ini sampai jumpa di tutorial berikutnya.
[stextbox id=”info”] Anda serius ingin menguasai HTML ?Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]
Pingback: Belajar HTML Part 23 Cara Membuat Input File di Form HTML (Form Upload) | warungbelajar.com
keren bro,gua berhasil bikinny thanks
My blog
Alhamdulillah, kita dari warungbelajar senang sekali bisa bermanfaat
makasih tutorialnya gan..
jelas banget
Terima kasih mas sudah berkunjung, semoga bisa bermanfaat tutorialnya 😀
bang kalau menguabah radio button ke dropdwon gimana code nya
Kalau dropdown pakai selectbox aja mas
Hasil nilainya bisa dikirim ke email pak dalam jumlah banyak (Untuk keperluan siswa ulangan). Saya udah coba pakai adopsi script di contact us, ternyata ada limitnya.
maksudnya seperti apa ya pak, saya kurang paham