info-b

Tutorial Form HTML Part 6: Fungsi dan Cara Penggunaan tag input type radio HTML

Posted on

Cara pemakaian tag input type radio telah kita bahas di panduan Belajar HTML Dasar: Cara Membuat Form di HTML (tag form), namun kali ini kita akan mempelajari beberapa atribut urgen yang sering digunakan bagi tipe radio ini.

Beberapa atribut lebih berfungsi selaku persentasi atau mempercantik tampilan dari form, sehingga kalau sahabat telah menguasai CSS, sebaiknya menggunakan CSS bagi kebutuhan tersebut.


Kegunaan tag input type radio pada Penyusunan Form HTML

Tag input type radio berfungsi bagi merancang tombol radio atau tombol alternatif yang diisi dengan cara memilih dari diantara tombol radio yang terdapat. Radio lazim digunakan bagi alternatif yang membatasi user bagi memilih satu dari alternatif yang terdapat.

Pada pemakaian radio HTML, kita hanya memerlukan tag input dengan sebuah atribut type radio. Berikut format mendasar radio pada HTML:

Radio tersebut tak mesti selalu berada di pada tag form HTML, namun kalau menggunakan radio diluar tag form, javascript biasanya digunakan bagi memprosesnya.


Atribut name: Bagi Pemrosesan dan Penyusunan Group radio

Walaupun sahabat dapat menggunakan radio tanpa atribut name, namun dengan atribut name inilah radio dapat berfungsi dengan semestinya. HTML menggunakan atribut name selaku penanda bahwa radio tersebut berada di pada satu group dan hanya dapat dipilih diantara saja. Berikut yaitu cara penulisan tag input type radio dengan atribut name:

Perhatikan bahwa bagi merancang beberapa objek radio menjadi sebuah group, nilai dari atribut name yang digunakan mesti sama. Selain itu, persis seperti objek form lainnya, atribut name pun berfungsi selaku penanda nama bagi memproses hasil alternatif form ke pada web server (misalnya dengan PHP).


Atribut value: Selaku Nilai Bagi Pemrosesan radio

Atribut value bagi radio bermanfaat di ketika pemrosesan form oleh web server. Misalnya pada bahasa pemograman PHP, nilai dari value inilah yang akan diproses. Kamu bebas mengisinya dengan nilai apapun, namun akan lebih mempermudah kalau diisi dengan manfaat dari radio itu sendiri.

Berikut contoh pemakaian atribut value:


Atribut Checked: Cara Menandai Alternatif radio

Atribut checked digunakan bagi menandai dipilih atau tidaknya radio tersebut. Satu-satunya nilai dari atribut checked ini yaitu checked, sehingga penulisannya menjadi: checked = “checked”. Berikut contoh penulisan mendasar atribut checked radio:

Bila sahabat menjalankan kode diatas, karenanya di ketika halaman tampil pertama-tama kali, kotak isian radio yang kedua akan seketika terpilih. Hal ini dapat digunakan selaku isian defaut bagi form sahabat.


Atribut disabled: Menonaktifkan tag input type radio

Atribut disabled digunakan bagi merancang radio tak dapat digunakan. Pemakaian atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah radio hanya dapat diisi ketika user telah mengisi form diatasnya.

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

Atribut disabled akan merancang radio berwarna abu-abu dan memberikan tampilan kepada user bahwa radio tersebut tak dapat digunakan.


Atribut id dan class: CSS dan Javascript

Selain atribut type, value, checked dan disabled, kita pun dapat menggunakan atribut umum seperti id dan class pada tag input type radio. Tag id dan class akan dibutuhkan bagi pemograman HTML menggunakan Javascript dan CSS.


Cara Pemakaian tag input type radio pada form HTML

Bagi merangkum pemakaian Tag Input type=”radio” dan juga atribut-atributnya, saya akan merancang contoh kode HTML bagi seluruh atribut yang telah kita pelajari:

Bila sahabat perhatikan, di setiap contoh saya memberikan atribut name yang berubah-ubah dari jenis_kelamin1 hingga dengan jenis_kelamin5, hal ini agar masing-masing radio dianggap selaku contoh yang terpisah.

Di contoh terakhir saya menggunakan tag label, tag fieldset dan tag legend yang telah kita pelajari di tutorial form HTML: Fungsi dan Cara Penggunaan Tag Fieldset dan Tag Legend bagi menambah struktur dan mempercantik tampilan form.


Tag input type radio yang telah kita pelajari pada Tutorial Form HTML: Fungsi dan Cara Penggunaan Tag Input Type Radio ini cocok digunakan bagi objek form yang membutuhkan user bagi memilih hanya satu diantara alternatif yang terdapat.

Berikutnya kita akan membahas tag input tipe file yang digunakan bagi upload data.


Sumber https://www.duniailkom.com/