1. Login.html
<?php
$host = "localhost";
$user = "root";
$password = "";
$db = "demo";
// Connect to the database
mysql_connect($host, $user, $password);
mysql_select_db($db);
if (isset($_POST['Username'])) {
$uname = $_POST['Username'];
$password = $_POST['Password'];
// Query to check if user exists with the given username and password
$sql = "SELECT * FROM loginform WHERE user='" . $uname . "' AND Pass='" . $password . "' LIMIT 1";
$result = mysql_query($sql);
if (mysql_num_rows($result) == 1) {
echo "You Have Successfully Logged in";
exit();
} else {
echo "You Have Entered Incorrect Password";
exit();
}
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="Login.css">
</head>
<body>
<div class="loginbox">
<img src="Logo1.png" class="avatar">
<form method="post" action="register.php">
<h1>Login Here</h1>
<p>Username</p>
<input type="text" name="Username" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="Password" placeholder="Enter Password">
<input type="submit" name="LOGIN" value="Login">
<a href="#">Forget password?</a><br>
<p>Already a member? <a href="Login.php">Sign in</a></p>
</form>
</div>
</body>
</html>
2. Login.css
body {
margin: 0;
padding: 0;
background: url('background.jpg');
background-size: cover;
font-family: sans-serif;
}
.loginbox {
width: 320px;
height: 420px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-100px / 2);
left: calc(50% - 50px);
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
.loginbox input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: aliceblue;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: #ffc107;
color: #000;
}
.loginbox a {
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.loginbox a:hover {
color: #ffc107;
}
Explanation:
-
PHP Code: The code checks if the user has entered the username and password in the form. It connects to the MySQL database and verifies if the entered credentials match with any user stored in the database.
-
HTML Structure: A simple login form with fields for the username and password.
-
CSS Styling: Styles for the login form, including background image, input fields, and submit button, ensuring a clean and user-friendly design.
