Creating a login page in HTML is a fundamental aspect of web development, allowing users to securely access restricted content. This article provides a step-by-step guide on how to create a simple login page in HTML, complete with source code and an example output.
Setting Up Your Workspace
Before we begin, ensure that you have a text editor and a web browser ready. These tools will facilitate the creation and testing of your HTML code.
HTML Structure
Here is a basic HTML structure for your login page:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<div class="login-container">
<h1>Login</h1>
<form action="process-login.php" method="post">
<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">
</form>
</div>
</body>
</html>
In this code:
- We establish a basic HTML structure, including the `<head>` section for the page title.
- Inside the `<body>`, a container (`<div class="login-container">`) holds our login form.
- The form's action attribute specifies the script that will manage the login process, set here as "process-login.php."
- The form contains two input fields for the username and password, each with associated labels.
- A submit button allows users to send their login information.
Styling with CSS
To enhance the visual appeal of your login page, you can apply CSS. Here's a simple example to get you started:
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
text-align: center;
}
.login-container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px #888888;
width: 300px;
margin: 0 auto;
padding: 20px;
margin-top: 100px;
}
h1 {
color: #333;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
background-color: #007BFF;
color: white;
border: none;
padding: 10px;
margin-top: 15px;
border-radius: 3px;
cursor: pointer;
}
</style>
This CSS code provides a basic style for your login page. Feel free to customize it to match your website's design.
PHP Script for Handling Login (Optional)
In a real-world scenario, you would need a server-side script to handle the login process, validate user credentials, and grant access. You can create a PHP script, for example, to process the login form and interact with a database.
Here's a simplified example:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST["username"];
$password = $_POST["password"];
// Implement your authentication logic here (e.g., database queries)
// For the sake of this example, let's assume successful login
if ($username == "demo" && $password == "password") {
header("Location: welcome.php");
exit();
} else {
echo "Invalid username or password. Please try again.";
}
}
?>
This script should be saved as "process-login.php" and placed in the same directory as your HTML file.
Testing Your Login Page
To test your login page, simply open it in a web browser. You can use the sample credentials ("demo" and "password") to observe how the login process functions.
That concludes our guide to creating a basic login page in HTML. For real-world applications, remember to implement robust security measures and user authentication, such as password hashing and session management.
Subscribe our Youtube Channels to get more latest updates.
