Tutorial membuat form login sederhana | KodeGua

Tutorial membuat form login sederhana

Sebelumnya kita sudah membahas tentang HTML, dan CSS, sekarang kita akan membuat form login sederhana menggunakan HTML, dan CSS .

berikut adalah langkah-langkah untuk membuat form login sederhana menggunakan HTML dan CSS. Form ini tidak akan memiliki fungsionalitas otentikasi sejati (karena itu akan melibatkan server), tetapi ini adalah contoh dasar form login.

Langkah 1: Membuat Struktur HTML

Buat file HTML dengan struktur dasar berikut ini:

Membuat file HTML (index.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="styles.css">
    <title>Form Login</title>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h2>Login</h2>
        </div>
        <form action="proses_login.php" method="POST">
            <div class="input-container">
                <input type="text" id="username" name="username" placeholder="Username" required>
            </div>
            
            <div class="input-container">
                <input type="password" id="password" name="password" placeholder="Password" required>
            </div>
            
            <button type="submit">Login</button>
        </form>
    </div>
</body>
</html>

Langkah 2: Membuat CSS untuk Desain

Buat file CSS terpisah (misalnya "styles.css") untuk styling form login. Berikut contoh CSS yang sederhana:

Membuat file CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    text-align: center;
    margin: 0;
    padding: 0;
}

.login-container {
    background-color: #fff;
    max-width: 300px;
    margin: 100px auto;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    animation: slide-up 0.5s ease-in-out;
}

@keyframes slide-up {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.login-header h2 {
    margin: 0;
    color: #333;
    font-size: 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.input-container {
    margin-bottom: 20px;
    margin-top: 20px;
    margin-right: 20px;
    animation: slide-up 0.5s ease-in-out;
}

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

button {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

button:hover {
    background-color: #0056b3;
}

Langkah 3: Menampilkan Form Login

Buka file HTML dalam browser Anda untuk melihat tampilan form login yang telah Anda buat. Anda dapat menyesuaikan warna, ukuran, dan gaya desain sesuai dengan preferensi Anda dengan mengedit CSS.

Ini adalah form login sederhana yang bisa menjadi dasar untuk pengembangan lebih lanjut dengan menambahkan fungsionalitas otentikasi di sisi server (misalnya, menggunakan PHP, Python, atau bahasa pemrograman server-side lainnya).

dan itu adalah form login sederhana yang kita buat menggunakan HTML dan CSS. selanjutnya akan kita buat lagi form login yang menarik lainnya jadi jangan lupa untuk berkunjung lagi

KodeGua

Cari Blog Ini