Artikel ini akan membimbing anda dalam mencipta butang radio HTML dengan bantuan contoh praktikal.
Bagaimana untuk Menambah Butang Radio dalam HTML?
Untuk menambah butang radio dalam HTML, ikuti sintaks yang diberikan di bawah:
< input menaip = 'radio' nama = '' nilai = '' >
Berikut ialah perihalan sintaks yang dinyatakan:
- “ menaip ”: Atribut ini menentukan jenis input yang anda ingin buat seperti teks, radio, kotak semak dan banyak lagi. Untuk membuat butang radio, nilai atribut mesti ditetapkan sebagai 'radio'.
- “ nama ”: Ia mentakrifkan nama elemen input. Atribut ini harus sama untuk senarai butang radio.
- “ nilai ”: Ini menentukan nilai yang akan dihantar ke pelayan apabila butang radio ditandakan sebagai ditanda.
Contoh: Menambah Butang Radio dalam HTML
Contoh ini akan membincangkan prosedur menambah butang radio dalam HTML menggunakan butang radio input. Dalam
Langkah 1: Mencipta Fail HTML
Mula-mula, tambahkan teg
Di dalam
- Pertama, tambahkan ' teg ” untuk memberikan tajuk ke halaman.
- Kemudian, ' teg ” untuk perenggan atau baris teks.
- Selepas itu, teg input ditambah dengan atribut ' menaip 'mempunyai nilai' radio ”, nama ditetapkan sebagai pilih, dan “ nilai 'sebagai' merah ”. Nilai yang berbeza diberikan kepada setiap butang radio yang mempunyai nama yang sama. Nama yang sama mewakili kumpulan atau senarai yang sama.
- Jika anda ingin menambah butang yang secara lalai ditanda sebagai ditanda, kemudian tetapkan atribut ' diperiksa ” ke butang itu.
- Akhir sekali, ' elemen ” pada setiap butang radio digunakan untuk menambah kapsyen. Ia juga menyediakan kebolehaksesan yang lebih baik.
Kod di bawah ialah tafsiran senario di atas:
< h1 > Butang Radio HTML h1 >< hlm > Mana warna kegemaran anda? hlm >
< input menaip = 'radio' nama = 'pilih warna' nilai = 'merah' diperiksa >
< label untuk = 'radio1' > Merah label >
< br >
< input menaip = 'radio' nama = 'pilih warna' nilai = 'biru' >
< label untuk = 'radio1' > Biru label >
< br >
< input menaip = 'radio' nama = 'pilih warna' nilai = 'hijau' >
< label untuk = 'radio1' > hijau label >
< br >
< input menaip = 'radio' nama = 'pilih warna' nilai = 'ungu' >
< label untuk = 'radio1' > Ungu label >
< br >
< input menaip = 'radio' nama = 'pilih warna' nilai = 'yang lain' >
< label untuk = 'radio1' > Lain-lain label >
Ia boleh dilihat bahawa butang radio berjaya dibuat:
Anda juga boleh menggunakan gaya pada butang radio yang dibuat di atas dengan mengikut kod CSS yang disebut di bawah.
Langkah 2: Menggunakan Gaya pada HTML
' div ” menunjukkan teg div yang telah kami buat dalam fail HTML:
- Pertama, ' warna latar belakang ” harta ditetapkan sebagai “ #8197f0 ”.
- “ sempadan ” harta ditetapkan sebagai “ 5px bertitik #13023a ”, dengan 5px mewakili lebar sempadan, bertitik menunjukkan jenis garisan dan seterusnya menunjukkan warna sempadan.
- “ padding ” ditetapkan sebagai “ 20px 100px ” di mana 20px menentukan padding dari atas dan bawah dan 100px menunjukkan padding dari kiri dan kanan.
- Untuk penggayaan fon, tetapkan ' font-family ” nilai harta sebagai “ kursif ”.
CSS
div {warna latar belakang: #8197f0;
sempadan: 5px bertitik #13023a;
padding: 20px 100px;
saiz fon: 20px;
font-family: kursif;
}
Ia boleh dilihat bahawa elemen div berjaya digayakan:
Itu sahaja! Kami telah menerangkan secara terperinci tentang butang radio HTML.
Kesimpulan
Butang radio ialah input yang sentiasa muncul dalam kumpulan dua atau lebih pilihan. Daripada kumpulan ini, pengguna hanya boleh memilih satu pilihan. Dalam HTML, butang radio boleh dibuat menggunakan ' teg ' mempunyai jenis atribut dengan nilai ' radio ”. Blog ini menunjukkan kaedah untuk menambah butang radio dalam HTML.