Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini
XSkodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Membuat form login yang cantik dan menarik dapat menjadi tantangan untuk pemula. Namun, dengan menggunakan HTML dan CSS, kamu bisa membuat form tersebut dengan mudah. Dalam artikel ini, kita akan membahas cara membuat dan menghias form login menggunakan HTML dan CSS.
Sebelum kita mulai, pastikan kamu sudah mempunyai pengetahuan dasar tentang HTML dan CSS.
Membuat form login dengan HTML sangatlah sederhana. Kamu hanya perlu memasukkan beberapa tag input dan button dalam tag form.
Berikut adalah contoh struktur dasar form login:
</form action="" method="post">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Login</button>
</form>
Di sini, kami menggunakan tag input dengan tipe teks untuk membuat kolom username dan password. Tipe password digunakan sehingga teks yang dimasukkan pengguna akan ditampilkan sebagai titik atau asterisk. Selanjutnya, kami menggunakan tag button untuk membuat tombol login.
Sekarang kita akan membuat form login kita menjadi lebih menarik menggunakan CSS. Kamu bisa menambahkan CSS secara inline atau dengan membuat file CSS terpisah.
Berikut adalah contoh cara menghias form login dengan CSS:
form {
width: 300px;
margin: auto;
padding: 30px;
background: #f4f4f4;
border-radius: 5px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 15px;
margin-bottom: 15px;
}
button {
width: 100%;
padding: 15px;
background: #2a9d8f;
color: white;
cursor: pointer;
}
Pada kode di atas, kita membuat form berada di tengah halaman dengan menggunakan margin: auto
. Kita juga menambahkan spasi antara setiap field input dan membuat tombol login berwarna hijau.
Demikianlah cara membuat dan menghias form login dengan HTML dan CSS. Semoga tutorial ini bermanfaat dan bisa membantu kamu belajar lebih jauh tentang HTML dan CSS. Jangan lupa untuk selalu berlatih dan berkarya, ya!