Cara Pemakaian dan Fungsi tag input type radio HTML

belajar HTML dan CSS untuk pemula

Cara pemakaian tag input type radio sudah kita bahas pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form), tetapi saat ini kita akan mempelajari beberapa atribut penting yang biasa dipakai untuk tipe radio ini.

Beberapa atribut lebih berguna sebagai persentasi atau mempercantik tampilan dari form, sehingga bila kamu sudah menguasai CSS, disarankan memakai CSS untuk kebutuhan itu.

Fungsi tag input type radio dalam Pembuatan Form HTML

Tag input type radio berguna untuk membuat tombol radio atau tombol pilihan yang diisi dengan metode memilih dari salah satu tombol radio yang ada. Radio sering dipakai untuk pilihan yang membatasi user untuk memilih satu dari pilihan yang ada.

Dalam pemakaian radio HTML, kita cuma membutuhkan tag input dengan sebuah atribut type radio. Berikut format dasar radio dalam HTML:

<input type="radio"/>Penjelasan radio

Radio itu tidak mesti selalu berada di dalam tag form HTML, tetapi bila memakai radio diluar tag form, javascript pada umumnya dipakai untuk memprosesnya.

Atribut name

Meskipun kamu bisa memakai radio tanpa atribut name, tetapi dengan atribut name inilah radio bisa berfungsi dengan seharusnya. HTML memakai atribut name sebagai penanda bahwa radio itu berada di dalam satu group dan cuma bisa dipilih salah satu saja. Berikut ialah cara penulisan tag input type radio dengan atribut name:

<form>
   <input type="radio" name="nama_radio"/>keterangan radio1
   <input type="radio" name="nama_radio"/>keterangan radio2
</form>

Perhatikan bahwa untuk membuat beberapa objek radio jadi sebuah group, nilai dari atribut name yang dipakai harus sama. Disamping itu, persis seperti objek form lainnya, atribut name juga berguna sebagai penanda nama untuk memproses hasil pilihan form ke dalam web server (contohnya dengan PHP).

Atribut value

Atribut value untuk radio berguna di saat pemrosesan form oleh web server. Contohnya dalam bahasa pemograman PHP, nilai dari value inilah yang akan diproses. Kamu bebas mengisinya dengan nilai apapun, tetapi bakal lebih mempermudah bila diisi dengan fungsi dari radio itu sendiri.

Berikut contoh pemakaian atribut value:

<form>
   <input type="radio" name="nama_radio" value="isi_radio1"/>keterangan radio1
   <input type="radio" name="nama_radio" value="isi_radio2"/>keterangan radio2
</form>

Atribut Checked

Atribut checked dipakai untuk menandai dipilih atau tidaknya radio itu. Satu-satunya nilai dari atribut checked ini merupakan checked, sehingga penulisannya jadi: checked = “checked”. Berikut contoh penulisan dasar atribut checked radio:

<form>
   <input type="radio" name="nama_radio" value="isi_radio1"/>keterangan radio1
   <input type="radio" name="nama_radio" value="isi_radio2" 
   checked="checked"/>keterangan radio2
</form>

Bila kamu menjalankan kode diatas, maka di saat halaman tampil pertama kali, kotak isian radio yang kedua akan segera terpilih. Hal ini dapat dipakai sebagai isian defaut untuk form kamu.

Atribut disabled

Atribut disabled dipakai untuk membuat radio tidak dapat dipakai. Pemakaian atribut ini pada umumnya di kombinasikan dengan javascript supaya berfungsi maksimum. Misalnya sebuah radio cuma bisa diisi saat user sudah mengisi form diatasnya.

Atribut disabled ini cuma mempunyai 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya:

<form>
   <input type="radio" name="nama_radio" disabled="disabled"/>keterangan radio1
</form>

Atribut disabled akan membuat radio berwarna abu-abu dan memberikan tampilan kepada user bahwa radio itu tidak dapat dipakai.

Atribut id dan class: CSS dan Javascript

Selain atribut type, value, checked dan disabled, kita juga dapat memakai atribut umum seperti id dan class dalam tag input type radio. Tag id dan class akan diperlukan untuk pemograman HTML memakai Javascript dan CSS.

Cara Pemakaian tag input type radio dalam form HTML

Untuk merangkum pemakaian Tag Input type=”radio” bersama atribut-atributnya, saya akan membuat contoh kode HTML bagi semua atribut yang sudah kita pelajari:

<!DOCTYPE html>
<html>

<head>
   <title>Belajar Tag Input Type=radio HTML</title>
</head>

<body>

   <h4>Belajar tag Input type="radio" di infanthree.com:</h4>
   <form>

   Radio dasar :
   <input type="radio" name="jenis_kelamin1" value="Pria"/>Pria
   <br />

   Radio dengan pilihan :
   <input type="radio" name="jenis_kelamin2" value="Pria"/>Pria
   <input type="radio" name="jenis_kelamin2" value="Wanita"/>Wanita
   <br />

   Radio + checked :
   <input type="radio" name="jenis_kelamin3" value="Pria"/>Pria
   <input type="radio" name="jenis_kelamin3" value="Wanita" 
   checked="checked"/>Wanita
   <br />

   Radio + disabled :
   <input type="radio" name="jenis_kelamin4" value="Pria" 
   disabled="disabled"/>Pria
   <input type="radio" name="jenis_kelamin4" value="Wanita" 
   disabled="disabled"/>Wanita
   <br />
   <br />

   Radio + Tag Label + Tag fieldset + Tag legend :
   <fieldset>
   <legend>Jenis Kelamin</legend>
   <label>
      <input type="radio" name="jenis_kelamin5" value="Pria"/>Pria
   </label>
   <label>
      <input type="radio" name="jenis_kelamin5" value="Wanita"/>Wanita
   </label>
   </fieldset>

   </form>
</body>
</html>

Bila kamu perhatikan, pada setiap contoh saya memberikan atribut name yang berubah-ubah dari jenis_kelamin1 hingga jenis_kelamin5, hal ini supaya setiap radio dianggap sebagai contoh yang terpisah.

Dalam contoh terakhir saya memakai tag label, tag fieldset dan tag legend yang sudah kita pelajari pada tutorial form HTML: Fungsi dan Cara Pemakaian Tag Fieldset dan Tag Legend untuk menambah struktur dan mempercantik tampilan form.

Tag input type radio yang sudah kita pelajari dalam Cara Pemakaian Tag Input Type Radio dan Fungsinya ini cocok dipakai untuk objek form yang memerlukan user untuk memilih cuma satu diantara pilihan yang ada. Berikutnya kita akan mengulas tag input tipe file yang dipakai untuk upload data.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat