Cara Membuat Checkbox di HTML

By Posted on

Cara Membuat Checkbox di HTML – Checkbox merupakan elemen penting dalam pembuatan formulir di HTML. Artikel ini akan membahas langkah-langkah detail dalam membuat checkbox di HTML untuk pemula. Dalam dunia perkembangan web, pemahaman tentang cara membuat checkbox dengan HTML sangatlah penting. Dengan mempelajari langkah-langkah sederhana ini, Anda akan dapat dengan mudah menambahkan kotak centang ke dalam formulir HTML Anda. Yuk, simak panduan lengkapnya! 

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat checkbox di HTML:

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

Cara Membuat Checkbox di HTML

1. Buat Folder Project “Checkbox”

Pertama-tama, buatlah folder baru untuk proyek Anda. Beri nama folder tersebut “Checkbox” agar mudah diidentifikasi.

2. Buat Sebuah File “checkbox.html”

Buka editor teks favorit Anda dan buatlah file baru dengan nama “checkbox.html“. Ini akan menjadi file utama yang akan menampilkan checkbox.

Berikut ini source code html yang harus Anda tambahkan untuk membuat checkbox 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 Checkbox</title>
</head>
<body>
<div class="container">
<input type="checkbox" id="checkbox">
<label for="checkbox" class="custom-checkbox"></label>
<span class="checkbox-text">Checkbox</span>
</div>
</body>
</html>

3. Buat File “style.css”

Selanjutnya, buatlah file “style.css” untuk menyesuaikan tampilan checkbox. Ini akan memperindah penampilan checkbox.

Baca Juga:  Cara Membuat Video Autoplay di HTML

Berikut ini source code css yng harus Anda tambahkan untuk membuat checkbox di html:

body, html {
margin: 0;
padding: 0;
height: 100%;
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}

.custom-checkbox {
display: inline-block;
width: 30px;
height: 30px;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
position: relative;
cursor: pointer;
}

.custom-checkbox::after {
content: "";
display: block;
width: 10px;
height: 20px;
border: solid #333;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.3s ease;
}

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

.checkbox-text {
margin-left: 10px;
font-family: Arial, sans-serif;
}

4. Mengubah Tampilan Checkbox

Anda dapat menyesuaikan tampilan checkbox sesuai keinginan Anda dengan menggunakan CSS di file “style.css” yang telah Anda buat sebelumnya.

5. Simpan & Lihat Tampilan

Simpan semua perubahan yang telah Anda buat pada file “checkbox.html” dan “style.css“. Kemudian, buka file “checkbox.html” menggunakan browser web favorit Anda untuk melihat tampilan checkbox yang telah Anda buat.

Baca Juga:  Cara Membuat Input Tanggal di HTML

Preview hasil

Berikut ini preview hasil checkbox html jika Anda berhasil membuatnya:

Penutup

Dengan mengikuti panduan langkah demi langkah ini, Anda akan menjadi lebih percaya diri dalam membuat dan menyesuaikan checkbox sesuai kebutuhan proyek Anda. Jangan ragu untuk bereksperimen dengan berbagai properti CSS dan atribut HTML untuk menciptakan desain checkbox yang sesuai dengan gaya dan kebutuhan situs web Anda. Dengan demikian, semoga artikel ini membantu Anda memahami cara membuat checkbox di HTML dan meningkatkan kemampuan pengembangan web Anda. Terima kasih telah membaca, dan selamat mencoba!

Related posts: