Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Dalam dunia web development saat ini, kemampuan untuk membuat form pendaftaran adalah salah satu keahlian dasar yang harus kamu miliki. Dengan mempelajari Cara Membuat Form Pendaftaran dengan HTML dan CSS, kamu tidak hanya memahami dasar-dasar web development, tetapi juga melangkah lebih jauh untuk menjadi developer web profesional. Berikut ini langkah-langkah mudah yang dapat kamu ikuti.
Sebelum mulai, kamu perlu memastikan bahwa perangkat kamu sudah terinstall text editor seperti Notepad, Sublime Text, atau Visual Studio Code. Sebuah browser (seperti Chrome, Firefox, atau Safari) juga diperlukan untuk meninjau hasil kode kamu.
Awalnya, kita akan membuat struktur dasar form dengan HTML. Di bawah ini adalah contoh kode HTML sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Form Pendaftaran</title>
</head>
<body>
<form>
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Daftar">
</form>
</body>
</html>Dalam kode di atas, kami telah menciptakan form dengan dua bidang entri, yaitu untuk nama dan email, dan tombol submit.
Setelah struktur dasar HTML dibuat, kita bisa menambahkan gaya dengan CSS untuk membuat form tersebut tampak lebih menarik.
Berikut adalah contoh kode CSS yang dapat kamu gunakan:
<style>
form {
width: 300px;
margin: 0 auto;
}
label {
font-weight: bold;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>Dalam kode di atas, kita telah memberikan styling pada form, field input dan juga tombol submit.
Sebagai langkah terakhir, kamu bisa menyimpan file HTML dan CSS. Jika kamu mengikuti contoh kode di atas, kamu bisa melihat hasil akhir dengan membuka file HTML di browser.
Itulah langkah-langkah cara membuat form pendaftaran dengan HTML dan CSS. Semoga dengan tutorial ini, kamu mampu membuat form pendaftaran sendiri untuk aplikasi web kamu. Selamat mencoba!
Link terkait: