Membuat Form Login dengan PHP dan CSS Part 1

admin

Dengan menambahkan CSS pada file index.php menjadikan posisi antar kontrol form simetris dan berada di tengah, berikut baris kodenya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        form {
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            box-sizing: border-box;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        .register-btn {
            display: block;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <form action="login.php" method="post">
        <h2>Login Form</h2>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>

        <input type="submit" value="Login">
        <a class="register-btn" href="register.html">Register</a>
    </form>

</body>
</html>

Pada script di atas, ada beberapa aturan CSS telah ditambahkan untuk membuat tampilan form lebih simetris dan berada di tengah halaman. Beberapa poin yang diubah atau ditambahkan:

  1. Flexbox untuk Pusat Aligment: Penggunaan properti display: flex; pada elemen body dengan properti align-items: center; dan justify-content: center; akan membuat elemen di dalamnya berada di tengah secara vertikal dan horisontal.
  2. Styling Form: Beberapa properti seperti width, padding, border, dan box-shadow ditambahkan untuk memberikan tampilan yang lebih baik pada form.
  3. Register Button: Ditambahkan sebuah tautan (<a>) di luar form sebagai tombol “Register” dengan gaya yang sesuai.

Pastikan Anda menyimpan script tersebut pada file index.php dan lihat tampilan hasilnya di browser. Jangan lupa untuk menyesuaikan atau menambahkan gaya CSS sesuai kebutuhan desain Anda.

Loading