Belajar HTML Part 22 Cara Membuat Radio Button di Form HTML

bySetyo Wibowo ID - 0

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.





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 :





<!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>




semisal kita simpan dengan nama input_type_radio_html.html lalu saya buka di browser :









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 :





<!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 :





<!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>








Attribute id dan class





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.


Tags:

Post a Comment (0)

أحدث أقدم