You’ve probably seen many login forms while browsing different sites. If you’re a beginner web developer, have you wondered how to create one using just HTML and CSS? Yes, it’s possible with just these two coding languages!
In this blog post, I’ll show you how to create a simple yet effective login form using only HTML and CSS. We’ll start by setting up the HTML structure, and then apply CSS to make it look good. We’ll also add Google and Apple login buttons for a modern touch.
We’ll use common HTML elements such as <form>, <div>, <a>, <label>, <button>, and simple CSS properties for styling this form. This project is straightforward, making it easy to follow and understand. Let’s get started!
Steps to Create a Simple Login Form in HTML and CSS
To create a simple yet effective login form using HTML and CSS only, follow these simple step-by-step instructions:
- First, create a folder with any name you like, e.g., login-form. Then, create the necessary files inside it.
- Create a file called
index.htmlto serve as the main file. - Create a file called
style.cssfor the CSS code. - Finally, download the Images folder and place it in your project directory. This folder contains the logos for Google and Apple used in this form project.
To start, add the following HTML codes to your index.html file: This code includes essential HTML markup with different semantic tags like <form>, <div>, <a>, <label>, <button> to create the login form layout.
<!DOCTYPE html>
<!-- Source Codes By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Form in HTML and CSS | CodingNepal</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="login_form">
<!-- Login form container -->
<form action="#">
<h3>Log in with</h3>
<div class="login_option">
<!-- Google button -->
<div class="option">
<a href="#">
<img src="logos/google.png" alt="Google" />
<span>Google</span>
</a>
</div>
<!-- Apple button -->
<div class="option">
<a href="#">
<img src="logos/apple.png" alt="Apple" />
<span>Apple</span>
</a>
</div>
</div>
<!-- Login option separator -->
<p class="separator">
<span>or</span>
</p>
<!-- Email input box -->
<div class="input_box">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter email address" required />
</div>
<!-- Paswwrod input box -->
<div class="input_box">
<div class="password_title">
<label for="password">Password</label>
<a href="#">Forgot Password?</a>
</div>
<input type="password" id="password" placeholder="Enter your password" required />
</div>
<!-- Login button -->
<button type="submit">Log In</button>
<p class="sign_up">Don't have an account? <a href="#">Sign up</a></p>
</form>
</div>
</body>
</html>
Next, add the following CSS codes to your style.css file to style your login form. Feel free to experiment with different CSS properties such as colors, fonts, and backgrounds to make your form more attractive.
/* Google Fonts Link */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* Resetting default styling and setting font-family */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body {
width: 100%;
min-height: 100vh;
padding: 0 10px;
display: flex;
background: #626cd6;
justify-content: center;
align-items: center;
}
/* Login form styling */
.login_form {
width: 100%;
max-width: 435px;
background: #fff;
border-radius: 6px;
padding: 41px 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.login_form h3 {
font-size: 20px;
text-align: center;
}
/* Google & Apple button styling */
.login_form .login_option {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.login_form .login_option .option {
width: calc(100% / 2 - 12px);
}
.login_form .login_option .option a {
height: 56px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
background: #F8F8FB;
border: 1px solid #DADAF2;
border-radius: 5px;
margin: 34px 0 24px 0;
text-decoration: none;
color: #171645;
font-weight: 500;
transition: 0.2s ease;
}
.login_form .login_option .option a:hover {
background: #ededf5;
border-color: #626cd6;
}
.login_form .login_option .option a img {
max-width: 25px;
}
.login_form p {
text-align: center;
font-weight: 500;
}
.login_form .separator {
position: relative;
margin-bottom: 24px;
}
/* Login option separator styling */
.login_form .separator span {
background: #fff;
z-index: 1;
padding: 0 10px;
position: relative;
}
.login_form .separator::after {
content: '';
position: absolute;
width: 100%;
top: 50%;
left: 0;
height: 1px;
background: #C2C2C2;
display: block;
}
form .input_box label {
display: block;
font-weight: 500;
margin-bottom: 8px;
}
/* Input field styling */
form .input_box input {
width: 100%;
height: 57px;
border: 1px solid #DADAF2;
border-radius: 5px;
outline: none;
background: #F8F8FB;
font-size: 17px;
padding: 0px 20px;
margin-bottom: 25px;
transition: 0.2s ease;
}
form .input_box input:focus {
border-color: #626cd6;
}
form .input_box .password_title {
display: flex;
justify-content: space-between;
text-align: center;
}
form .input_box {
position: relative;
}
a {
text-decoration: none;
color: #626cd6;
font-weight: 500;
}
a:hover {
text-decoration: underline;
}
/* Login button styling */
form button {
width: 100%;
height: 56px;
border-radius: 5px;
border: none;
outline: none;
background: #626CD6;
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
margin-bottom: 28px;
transition: 0.3s ease;
}
form button:hover {
background: #4954d0;
}
That’s it! If you’ve added the code correctly, you’re ready to see your login form. Open the index.html file in your preferred browser to view the login form in action.
Conclusion and final words
Creating a login form is a great way for beginners to grasp the basics of HTML CSS, and gain practical experience in designing and styling forms. By following the steps and code provided in this blog post, you successfully created your own login form.
To further enhance your web development skills, especially with forms, consider recreating other attractive login and registration forms showcased on this website. Many of these forms use JavaScript to add features like password visibility toggling, password strength checking, and form validation.
If you encounter any problems while creating your login form, you can download the source code files for this project for free by clicking the “Download” button. You can also view a live demo of it by clicking the “View Live” button.
Top comments (0)