Membuat Form Login Keren dan Simpel dengan HTML CSS

Mandan Koding29 Mei 20240

Hai! Apakah kamu ingin membuat form login sederhana untuk situs web kamu? Jangan khawatir, membuat form login itu mudah dan menyenangkan.

Dalam artikel ini, kita akan belajar cara membuat form login yang simpel namun keren menggunakan HTML dan CSS. Yuk, kita mulai!

Langkah 1: Struktur HTML

Langkah pertama adalah membuat struktur dasar HTML untuk form login. Kita akan menggunakan elemen-elemen HTML seperti <form>, <div>, dan <input>. Berikut ini adalah contoh kodenya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Login Keren</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form>
            <div class="input-group">
                <input type="text" id="username" placeholder="Username" required>
            </div>
            <div class="input-group">
                <input type="password" id="password" placeholder="Password" required>
            </div>
            <button type="submit">Login</button>
        </form>
    </div>
</body>
</html>

Langkah 2: Styling dengan CSS

Sekarang, kita akan menambahkan beberapa gaya menggunakan CSS agar form login kita terlihat lebih menarik. Buat file CSS dengan nama style.css dan tambahkan kode berikut:

/* Reset CSS untuk menghilangkan margin dan padding default */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center; /* Memusatkan form secara horizontal */
    align-items: center; /* Memusatkan form secara vertikal */
    height: 100vh;
    background-color: #f0f0f0; /* Warna latar belakang halaman */
}

.login-container {
    background-color: white; /* Warna latar belakang form */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center; /* Memusatkan teks di dalam form */
}

.login-container h2 {
    margin-bottom: 20px;
    color: #333; /* Warna teks judul */
}

.input-group {
    margin-bottom: 20px;
}

.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    font-size: 16px;
}

button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #f40e0e;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}

Penjelasan Kode CSS

Reset CSS: Menghilangkan margin dan padding default untuk semua elemen agar styling lebih konsisten.
body: Mengatur font default untuk keseluruhan halaman, menggunakan flexbox untuk memusatkan form secara horizontal dan vertikal, dan memberikan warna latar belakang.
.login-container: Memberikan latar belakang putih pada form, padding, radius sudut, bayangan, lebar, dan memusatkan teks di dalam form.
.login-container h2: Mengatur margin bawah dan warna teks judul.
.input-group: Memberikan margin bawah untuk memberi jarak antar input.
.input-group input: Mengatur lebar penuh, padding, border, radius sudut, outline, dan ukuran font untuk elemen input.
button: Mengatur lebar penuh, padding, border, radius sudut, warna latar belakang, warna teks, ukuran font, dan kursor untuk tombol login.
button: Memberikan efek hover dengan latar belakang abu-abu gelap pada tombol.

Kesimpulan

Dengan langkah-langkah di atas, Kamu telah berhasil membuat form login yang keren dan modern menggunakan HTML dan CSS, tanpa menggunakan animasi. Form login ini akan memberikan tampilan yang bersih dan profesional untuk situs web atau aplikasi Kamu.

Kamu dapat mengembangkan lebih lanjut dengan menambahkan elemen interaktif atau penyesuaian tambahan sesuai kebutuhan. Selamat mencoba!