Introduction
Have you ever wanted to create a Login Form? In this post, we will learn how to design and implement a Login Form using HTML, and CSS. So, let’s get started!
1. What is a Login Form?
A login form is a user interface element used in websites to authenticate users and grant them access to a restricted area or personal account. It typically consists of two input fields, one for the username or email address and another for the password. Users enter their credentials into these fields and submit the form to verify their identity.
2. Setting Up the HTML Structure
To start, we’ll create the basic HTML structure for our Login Form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - HTML and CSS</title>
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="form-container">
<form action="" class="form">
<h2>Welcome</h2>
<input type="text" name="" id="" placeholder="username">
<input type="password" name="" id="" placeholder="password">
<input type="submit" value="Login">
</form>
</div>
<div class="image-container">
<img src="login-bg.jpg" alt="Login image">
</div>
</div>
</body>
</html>3. Styling the Login Form with CSS
Next, we’ll style our Login Form using CSS. We’ll also import the Google Fonts “Poppins” so that the fonts look nicer.
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
*{
margin: 0px;
padding: 0px;
}
body{
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-color: aqua;
height: 100vh;
}
.container{
max-width: 760px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.form-container{
background: linear-gradient(45deg, #0081f5, #00b4fc);
padding: 100px 40px;
text-align: center;
}
.form-container .form{
width: 340px;
}
.form-container h2{
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
color:#fff;
letter-spacing: 3px;
}
.form-container input{
display: block;
margin: 0 auto;
padding: 15px 0px;
border-radius: 50px;
border: none;
width: 100%;
margin: 20px 0px;
text-align: center;
letter-spacing: 2px;
}
.form-container input:focus{
outline: none;
}
.form-container input[type="submit"]{
background-color: #fa9111;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
color:#fff;
cursor: pointer;
transition: .5s all;
}
.form-container input[type="submit"]:hover{
background-color: #fcac4b;
}
.image-container img{
width: 100%;
}
@media screen and (max-width: 768px){
.image-container{
display: none;
}
}4. Conclusion
Congratulations! You have successfully learned how to create a Login Form using HTML, and CSS.
FAQs
Q1: Can I customize the appearance of the Login Form?
Yes, you can customize the Login Form appearance by modifying the CSS code. Adjust the sizes, colors, and positions to match your website’s design.
Q2: How can I change the Image of the Login Form?
You can replace the “login-bg.jpg” image file in the code with your desired image file. Make sure to update the file name and extension accordingly.
Q3: Does the Login Form work on all browsers?
Yes, the Login Form should work on most modern web browsers, including Chrome, Firefox, Safari, and Edge.
Q4: Can I add additional functionality to the Login Form?
Absolutely! You can extend the functionality of the Login Form by adding features such as Remember Me, Forgot Password link, Register Button and Animations.
Q5: Is the Login Form will work on Mobile?
Yes, the Login Form is fully responsive and it will work on any device like Mobile, Tablet, and Desktop.
![[FIXED] – Fatal Error : Uncaught ReflectionException: Method get_site_editor_type does not exist](https://fixwebissues.com/wp-content/uploads/2022/08/Elementor-fixwebissues-300x229.png "FIXED – Fatal error: Uncaught Error: Class ElementorScheme_Typography 17")