Kali ini kita akan mempelajari cara membuat sebuah form login. Form login biasa digunakan untuk masuk ke dalam sistem sebagai bentuk Autentikasi. Autentikasi biasa disebut sebagai validasi data pengguna ketika ingin memasuki sistem tertentu. Dalam pembuatan form login di sini kita menggunakan bahasa pemrograman PHP dan menambahkan CSS sebagai pengatur tampilan antar muka UI/UX dari laman website yang dibuat.
Langkah dalam pembuatan form login kali ini kita siapkan sebuah file yang diberi nama file index.php dan dalam tag html kita sisipkan beberapa script CSS untuk menjadikan posisi antar kontrol form simetris dan berada di tengah, berikut baris kodenya:
Pertama kalian buka teks editor kalian, bisa Notepad++, Sublime Text atau Visual Studio Code. Lalu copy & paste code program di bawah ini dan simpan dengan nama file index.php.
<!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>
Untuk script di atas, ada beberapa penambahan aturan CSS supaya tampilan form lebih simetris dan berada di tengah halaman. Beberapa aturan yang ditambakan tersebut antara lain:
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 horizontal.
Styling Form:
Beberapa properti seperti width, padding, border, dan box-shadow ditambahkan untuk memberikan tampilan yang lebih baik pada form.
Register Button:
Ditambahkan sebuah tautan (<a>) di luar form sebagai tombol “Register” dengan gaya yang sesuai.
Pastikan sudah menyimpan script di atas dengan nama file index.php dan coba lihat hasilnya di browser seperti gambar di bawah ini.
