CARA MEMBUAT DAN MENGHIAS FORM LOGIN HTML CSS

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.

Persiapan Sebelum Membuat Form Login

Sebelum kita mulai, pastikan kamu sudah mempunyai pengetahuan dasar tentang HTML dan CSS.

1. HTML: Adalah bahasa yang digunakan untuk membuat struktur halaman web.
2. CSS: Adalah bahasa yang digunakan untuk mempercantik halaman web atau mengubah tampilan struktur yang sudah dibuat dengan HTML.

Langkah Pertama: Membuat Struktur HTML Form Login

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.

Langkah Kedua: Menghias Form Login dengan CSS

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.

Penutup

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!