Cara Membuat Button Radio di HTML

By Posted on

Cara Membuat Button Radio di HTML – Radio button merupakan salah satu elemen penting dalam pembuatan formulir web. Dalam dunia pengembangan web, pengetahuan tentang cara membuat radio button menjadi hal yang sangat diperlukan, terutama bagi pemula. Tombol radio memungkinkan pengguna untuk memilih satu opsi dari beberapa pilihan yang tersedia, sehingga mempermudah interaksi dan pengumpulan data dalam situs web Anda. Dalam artikel ini, kelashtml telah menyajikan panduan langkah demi langkah tentang cara membuat radio button di HTML, mulai dari pembuatan folder proyek hingga pengaturan tampilan menggunakan CSS. Dengan mengikuti panduan ini, Anda akan dapat membuat radio button dengan mudah dan efisien untuk proyek web Anda. Ayo mulai!

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat button radio di html:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google Chrome (Web browser)
  • Niat yang kuat.

Cara Membuat Button Radio di HTML

1. Buat Tombol Radio Proyek Folder

Langkah pertama adalah membuat folder khusus untuk proyek radio button Anda. Anda dapat memberi nama folder sesuai keinginan Anda, misalnya “project_radio_button“.

Baca Juga:  Cara Membuat Navbar dengan HTML dan CSS

2. Buat File radio_button.html

Selanjutnya, buatlah file HTML baru di dalam folder proyek Anda. Beri nama file tersebut “radio_button.html“. File ini akan menjadi halaman web tempat Anda membuat dan menampilkan radio button.

Berikut ini source code html yang harus Anda tambahkan untuk membuat radio button di html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Styled Radio Button</title>
</head>
<body>
<div class="container">
<input type="radio" id="option1" name="options" checked>
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option3" name="options">
<label for="option3">Option 3</label>
</div>
</body>
</html>

3. Buat File style.css

Untuk mengatur tampilan radio button agar sesuai dengan desain yang diinginkan, buatlah file CSS secara terpisah. Anda dapat menyebutnya “style.css“. File CSS ini akan digunakan untuk mengatur gaya dan tata letak tombol radio.

Berikut ini source code css yang harus Anda tambahkan untuk membuat button radio di html:

.container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 50px;
}

input[type="radio"] {
display: none;
}

label {
position: relative;
cursor: pointer;
font-size: 18px;
}

label::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #aaa;
margin-right: 10px;
}

input[type="radio"]:checked + label::before {
background-color: #2196F3;
border-color: #2196F3;
}

label::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
transition: transform 0.2s ease-in-out;
}

input[type="radio"]:checked + label::after {
transform: translate(-50%, -50%) scale(1);
}

4. Mengubah Tampilan Tombol Radio

Dalam file HTML “radio_button.html“, Anda dapat menambahkan elemen radio button menggunakan tag <input type=”radio”>. Setiap tombol radio harus memiliki atribut nameyang sama untuk menunjukkan bahwa mereka adalah bagian dari satu grup dan atribut valueuntuk menentukan nilai yang akan dikirimkan saat salah satu tombol radio dipilih.

Baca Juga:  Cara Membuat Footer Sederhana dengan HTML dan CSS

5. Simpan & Lihat Tampilan

Setelah menambahkan tombol radio ke dalam file HTML, simpan perubahan Anda. Buka file “radio_button.html” menggunakan browser web untuk melihat tampilan radio button yang telah Anda buat. Pastikan tampilannya sesuai dengan yang diharapkan.

Preview hasil

Berikut ini preview hasil button radio di html:

 

Penutup

Dengan mengetahui cara membuat tombol radio di HTML, Anda sekarang memiliki keterampilan dasar yang penting dalam pengembangan web. Teruslah belajar dan bereksperimen dengan berbagai elemen HTML lainnya untuk memperluas pengetahuan dan keterampilan Anda dalam dunia pengembangan web. Jangan ragu untuk menggali lebih dalam tentang CSS dan JavaScript untuk meningkatkan konten dan estetika radio button Anda. Semoga panduan ini bermanfaat bagi Anda dalam perjalanan Anda menuju menjadi seorang pengembang web yang handal!

Related posts: