Artikel ini akan memandu Anda dalam membuat radio button HTML dengan bantuan contoh praktis.
Bagaimana Cara Menambahkan Tombol Radio di HTML?
Untuk menambahkan tombol radio dalam HTML, ikuti sintaks yang diberikan di bawah ini:
< memasukkan Tipe = 'radio' nama = '' nilai = '' >
Berikut adalah deskripsi dari sintaks yang disebutkan:
- “ Tipe ”: Atribut ini menentukan jenis input yang ingin Anda buat seperti teks, radio, kotak centang, dan lainnya. Untuk membuat tombol radio, nilai atribut harus ditetapkan sebagai 'radio'.
- “ nama ”: Ini mendefinisikan nama elemen input. Atribut ini harus sama untuk daftar tombol radio.
- “ nilai ”: Ini menentukan nilai yang akan dikirim ke server saat tombol radio ditandai sebagai dicentang.
Contoh: Menambahkan Tombol Radio di HTML
Contoh ini akan membahas prosedur penambahan radio button pada HTML menggunakan input radio button. Di
Langkah 1: Membuat File HTML
Pertama, tambahkan tag
Di dalam
- Pertama, tambahkan “ ” tag untuk memberi tajuk ke halaman.
- Kemudian, sebuah “ ” tag untuk paragraf atau baris teks.
- Setelah itu masukan tag ditambahkan dengan atribut “ Tipe “memiliki nilai” radio ”, nama ditetapkan sebagai pilih, dan“ nilai ' sebagai ' merah ”. Nilai yang berbeda diberikan untuk setiap tombol radio yang memiliki nama yang sama. Nama yang sama mewakili grup atau daftar yang sama.
- Jika Anda ingin menambahkan tombol yang secara default ditandai sebagai dicentang, maka tetapkan atribut “ diperiksa ” ke tombol itu.
- Terakhir, “ ” pada setiap tombol radio digunakan untuk menambahkan keterangan. Ini juga menyediakan aksesibilitas yang lebih baik.
Kode di bawah ini adalah interpretasi dari skenario di atas:
< h1 > Tombol Radio HTML h1 >< p > Yang mana warna favoritmu? p >
< memasukkan Tipe = 'radio' nama = 'pilih warna' nilai = 'merah' diperiksa >
< label untuk = 'radio1' > Merah label >
< br >
< memasukkan Tipe = 'radio' nama = 'pilih warna' nilai = 'biru' >
< label untuk = 'radio1' > Biru label >
< br >
< memasukkan Tipe = 'radio' nama = 'pilih warna' nilai = 'hijau' >
< label untuk = 'radio1' > Hijau label >
< br >
< memasukkan Tipe = 'radio' nama = 'pilih warna' nilai = 'ungu' >
< label untuk = 'radio1' > Ungu label >
< br >
< memasukkan Tipe = 'radio' nama = 'pilih warna' nilai = 'yang lain' >
< label untuk = 'radio1' > Yang lain label >
Dapat dilihat bahwa tombol radio berhasil dibuat:
Anda juga dapat menerapkan gaya ke tombol radio yang dibuat di atas dengan mengikuti kode CSS yang disebutkan di bawah.
Langkah 2: Menerapkan Gaya ke HTML
“ div ” menunjukkan tag div yang telah kami buat di file HTML:
- Pertama, “ warna latar belakang Properti ” ditetapkan sebagai “ #8197f0 ”.
- “ berbatasan Properti ” ditetapkan sebagai “ 5px bertitik #13023a ”, di mana 5px mewakili lebar batas, titik-titik menunjukkan jenis garis, dan selanjutnya menunjukkan warna batas.
- “ lapisan ” ditetapkan sebagai “ 20px 100px ” di mana 20px menentukan padding dari atas dan bawah dan 100px menunjukkan padding dari kiri dan kanan.
- Untuk gaya font, tetapkan “ font-family ” nilai properti sebagai “ kursif ”.
CSS
div {warna latar belakang: #8197f0;
perbatasan: 5px bertitik #13023a;
padding: 20px 100px;
ukuran font: 20px;
font-family: kursif;
}
Dapat dilihat bahwa elemen div ditata dengan sukses:
Itu dia! Kami telah menjelaskan secara rinci tentang tombol radio HTML.
Kesimpulan
Tombol radio adalah input yang selalu muncul dalam kelompok dua opsi atau lebih. Dari grup ini, pengguna hanya dapat memilih satu opsi. Dalam HTML, tombol radio dapat dibuat menggunakan “