Login form design is an essential part of web design because it allows the website owner to collect some information about their visitors, and it helps to communicate with them. Its also increase the trust level among the visitor about the website they are visiting.
Below is the video tutorials. watch and practices
You may like this:
- Sign Up and Login form with HTML and CSS
- Create Login form page with HTML and CSS
- Animated Search Bar with HTML and CSS
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 Sign In Form design, then feel free to use it in your project. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form | By Code Info</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loginbox">
<img class="logo" src="logo.png">
<h1>Sign In</h1>
<form>
<label>Username</label>
<input type="text" placeholder="Enter Username">
<label>Password</label>
<input type="password" placeholder="Enter Password">
<input type="submit" value="Sign In">
</form>
<a href="#">Forgot Password?</a>
</div>
</body>
</html>
body{
background: peru;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.loginbox{
width: 300px;
height: 380px;
background: #1c2833;
color: white;
margin: 70px auto;
border-radius: 10px;
}
.logo{
width: 100px;
height:100px;
position: relative;
top: -70px;
left: calc(50% - 50px);
}
h1{
text-align: center;
margin-top: -60px;
}
label{
font-size: 18px;
display: block;
margin-left: 20px;
}
input{
width: 80%;
margin: 0 0 20px 20px;
}
input[type="text"],input[type="password"]{
border: none;
background: transparent;
border-bottom: 1px solid #fff;
height: 40px;
outline: none;
color: white;
font-size: 16px;
}
input[type="submit"]{
border: none;
outline: none;
height: 40px;
border-radius: 20px;
background: #fb2525;
color: white;
font-size: 20px;
cursor: pointer;
}
a{
text-decoration: none;
color: white;
margin-left: 30%;
}
input[type="submit"]:hover{
background: blueviolet;
}
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 visiting.
