Create a Simple Login form Login Form
Login form
Published on January 10, 2025
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<h2>Register Here</h2>
<form id="registrationForm">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter Username" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter Email" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter Password" required>
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm Password" required>
<label for="terms">
<input type="checkbox" id="terms" name="terms" required> I agree to the terms and conditions
</label>
<button type="submit">Register</button>
</form>
<p>Already have an account? <a href="login.html">Login</a></p>
<div id="responseMessage"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
height: 800px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background: url('images (7).jpeg') no-repeat center center/cover;
}
.background {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.login-container {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
width: 350px;
padding: 20px;
text-align: center;
color: white;
}
.login-container h2 {
margin-bottom: 20px;
}
.login-container form {
display: flex;
flex-direction: column;
gap: 15px;
}
.login-container input[type="text"],
.login-container input[type="password"] {
padding: 10px;
border: none;
border-radius: 5px;
outline: none;
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 14px;
}
.login-container input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.options {
display: flex;
justify-content: space-between;
font-size: 12px;
}
.options a {
color: #e0e0e0;
text-decoration: none;
}
.options a:hover {
text-decoration: underline;
}
button {
background: #4063ff;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #4843c4;
}
p {
margin-top: 15px;
font-size: 14px;
}
p a {
color: #e0e0e0;
text-decoration: none;
}
p a:hover {
text-decoration: underline;
}
How It Works
This code defines a user registration page with a stylish design and interactive features. Below is a detailed explanation of the code:
HTML Code:
The HTML structure is divided into the following sections:
1. Document Structure:
<!DOCTYPE html>: Declares the document as HTML5.
<html lang="en">: Sets the language of the document to English.
<head>: Contains metadata like charset, title, and links to stylesheets.
<body>: Contains the visible content and elements of the webpage.
2. Form Container:
<div class="form-container">: Wraps the form and other elements for styling.<h2>Register Here</h2>: A header for the registration form.
<form id="registrationForm">: The registration form element.
Inputs:
username, email, password, confirmPassword: Input fields for user data with placeholders and validation (required).
<input type="checkbox" id="terms" name="terms" required>: Checkbox for agreeing to terms and conditions.
Submit Button:
<button type="submit">Register</button>: A button to submit the form.
<p>Already have an account? <a href="login.html">Login</a></p>: A link for users who already have an account.
<div id="responseMessage"></div>: An empty div to display dynamic messages (e.g., success or errors).
3. External Files:
<link rel="stylesheet" href="style.css">: Links an external stylesheet for styling.
<script src="script.js"></script>: Links an external JavaScript file for interactivity.
CSS Code:
The CSS defines the visual appearance of the form and background.
1. Global Styles:
body, html: Ensures the page takes the full height and centers the content.
Background: Adds a centered, responsive background image (images (5).jpeg) with a cover layout.
2. Form Styling:
.form-container: A sleek, glass-like card style using:
rgba(255, 255, 255, 0.1): Transparent background.
backdrop-filter: blur(10px): Adds a frosted glass effect.
border-radius, box-shadow: Rounded corners and subtle shadow for depth.
Form Inputs:
Rounded, transparent fields with placeholders.
Highlighted borders when focused.
Buttons:
Styled with a hover effect, changing the background color when hovered.
3. Responsive Design:
Flexbox (display: flex) centers the container horizontally and vertically.
4. Text Styling:
Fonts: Uses Arial for a modern, clean look.
Links:
text-decoration: none to remove underlines.
hover adds an underline effect.
JavaScript File:
The script.js file is linked to handle form submissions or additional functionality, such as:
Validating password confirmation.
Displaying success/error messages in #responseMessage.
Key Features:
1. User-Friendly Design:
Simple, elegant form layout.
Fully responsive design with a centered registration form.
2. Interactive Elements:
Validations for required fields and checkbox.
Real-time feedback on form submissions using the JavaScript file.
3. Styling:
Frosted glass effect creates a modern and visually appealing design.
This code can be extended by implementing JavaScript for real-time validations, password strength indicators, and AJAX-based form submissions.
Join the conversation