Hey friends, Today in this blog you’ll learn how to make a Simple Login Form in HTML CSS With Source Code. Earlier I shared a blog on how to make Login Signup Page Now I’m going to show how to make a simple login form in html.
I’m sure you’ve seen many HTML login forms templates on many websites. A simple login form is a set of inputs used to authenticate or authenticate a user before accessing a private page. The login form contains one field for the username and another for the password.
About Simple Login Form in HTML.
In this layout [Simple Login Form], as you can see in the preview image, this is a stunning transparent login form built with HTML CSS and JavaScript. JavaScript is only used to switch between showing or hiding the password. login form has an image, shape, text, and social media icons. You can modify this form according to your requirements if you have basic knowledge of HTML and CSS.
A login form is a very common feature on websites these days. It allows users to create an account on your site, or to log in to an existing account. A login form typically contains a few text fields, where the user can enter their username and password. There may also be a “remember me” checkbox, which allows the user to stay logged in even after they close their browser.
Creating a login form in HTML is actually quite simple. All you need is a few input fields, and a submit button. The input fields can be of type “text” or “password“, depending on whether you want the user’s password to be visible as they type it. You can also add a “remember me” checkbox, as well as any other fields you think are necessary.
You Might Like this Blog:
- Website Builder in 2022.
- Snake JavaScript
- Personal Portfolio Website
- Factorial Program in Java
- Word Guessing Game
Assuming you would like a blog discussing a simple login form written in HTML:
Simple Login Form [Source Code]
Step 1
Initially you need to create two files HTML (.html) and CSS (.css). After creating these files, just paste the following codes into your VS IDE code sample create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.
<!DOCTYPE html>
<!-- Coding By CodeWithNepal - codewithnepal -->
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Simple Login Form HTML</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Rubik:400,700'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="login-form">
<form>
<h1>Login</h1>
<div class="content">
<div class="input-field">
<input type="email" placeholder="Email" autocomplete="nope">
</div>
<div class="input-field">
<input type="password" placeholder="Password" autocomplete="new-password">
</div>
<a href="#" class="link">Forgot Your Password?</a>
</div>
<div class="action">
<button>Register</button>
<button>Sign in</button>
</div>
</form>
</div>
</body>
</html>
Step 2
And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
body {
background: #0000FF;
font-family: 'Rubik', sans-serif;
}
.login-form {
background: #fff;
width: 500px;
margin: 65px auto;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
border-radius: 4px;
box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
}
.login-form h1 {
padding: 35px 35px 0 35px;
font-weight: 300;
}
.login-form .content {
padding: 35px;
text-align: center;
}
.login-form .input-field {
padding: 12px 5px;
}
.login-form .input-field input {
font-size: 16px;
display: block;
font-family: 'Rubik', sans-serif;
width: 100%;
padding: 10px 1px;
border: 0;
border-bottom: 1px solid #747474;
outline: none;
-webkit-transition: all .2s;
transition: all .2s;
}
.login-form .input-field input::-webkit-input-placeholder {
text-transform: uppercase;
}
.login-form .input-field input::-moz-placeholder {
text-transform: uppercase;
}
.login-form .input-field input:-ms-input-placeholder {
text-transform: uppercase;
}
.login-form .input-field input::-ms-input-placeholder {
text-transform: uppercase;
}
.login-form .input-field input::placeholder {
text-transform: uppercase;
}
.login-form .input-field input:focus {
border-color: #222;
}
.login-form a.link {
text-decoration: none;
color: #747474;
letter-spacing: 0.2px;
text-transform: uppercase;
display: inline-block;
margin-top: 20px;
}
.login-form .action {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.login-form .action button {
width: 100%;
border: none;
padding: 18px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
text-transform: uppercase;
background: #e8e9ec;
color: #777;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 0;
letter-spacing: 0.2px;
outline: 0;
-webkit-transition: all .3s;
transition: all .3s;
}
.login-form .action button:hover {
background: #d8d8d8;
}
.login-form .action button:nth-child(2) {
background: #2d3b55;
color: #fff;
border-bottom-left-radius: 0;
border-bottom-right-radius: 4px;
}
.login-form .action button:nth-child(2):hover {
background: #3c4d6d;
}Preview of Simple Login Form in HTML
