In this article, you will learn how to create Login Form using only HTML & CSS. Earlier in this blog, I have shared a couple of simple Login form, but here in this blog, I am going to create a nice-looking Login Form Page. Apart from this, I have shared many CSS animation examples in my blog. Please make sure to check those as well.
HTML forms are required to collect different kinds of user data inputs, such as contact information like name, email address, phone numbers and credit card information, etc.
Below is the video tutorials. watch and practices.
Input Element
That is the most typically used element inside HTML forms.
It allows you to specify diverse types of user enter fields, depending on the type attribute. An input detail can be of kind text area, password area, checkbox, radio button, submit button, reset button, record choose container, as well as several new enter types brought in HTML.I have used input type in this project as a text, password and Submit. The submit button is used to send the form data to a web server.
Source Code:
If you like this login Form, then feel free to use it in your project. First, you have to create two files. One of them is HTML, and the other is CSS. after creating the files, paste the code provided below.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Form | By Code Info</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="login">
<form>
<h1>Login</h1>
<hr>
<p>Explore the World!</p>
<label>Email</label>
<input type="text" placeholder="[email protected]">
<label>Password</label>
<input type="password" placeholder="enter your password!">
<button>Submit</button>
<p>
<a href="#">Forgot Password?</a>
</p>
</form>
</div>
<div class="pic">
<img src="/pic/image.jpg">
</div>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.
CSS CODE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: tomato;
}
.container{
width: 100%;
display: flex;
max-width: 850px;
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.login{
width: 400px;
}
form{
width: 250px;
margin: 60px auto;
}
h1{
margin: 20px;
text-align: center;
font-weight: bolder;
text-transform: uppercase;
}
p{
text-align: center;
margin: 10px;
}
hr{
border-top: 2px solid tomato;
}
.pic img{
width: 450px;
height: 100%;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
form label{
display: block;
font-size: 16px;
font-weight: 600;
padding: 5px;
}
input{
width: 100%;
margin: 2px;
border: none;
outline: none;
padding: 8px;
border-radius: 5px;
border: 1px solid gray;
}
button{
border: none;
outline: none;
padding: 8px;
width: 252px;
color: #fff;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
border-radius: 5px;
background: tomato;
}
button:hover{
background: rgba(214, 86, 64, 1);
}
p{
margin: 20px;
}
a{
color: black;
text-decoration: none;
}
I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for stopping by.
Bhhh
wow