We will use only HTML and CSS only these two we will make it fun. Using these two I gonna make a attractive login form. "How to create a login form using Only HTML and CSS". Try These Login Form to Make a Login Form and Attract customers. So here is the code and my work. Hope you are gonna love this and share with your friends too.
Step 1) Open a any code Editor in any Devices
Step 2) Create a file and save it index.html with .html extension
Step 3) Paste these code on index.html file and save it (ctrl+s)
Add this Code in index.html Page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to Create a Login Form in HTML and CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="form-container">
<form class="form-control">
<h2>login form</h2><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pswd" placeholder="Password"><br><br>
<input type="submit" name="Submit" value="Login"><br><br>
<p>Not Registered? <a href="#">Create an account</a></p>
</form>
</div>
</body>
</html>
*<link rel="stylesheet" type="text/css" href="style.css">
This Code be must be added without these code stylesheet code not run.
Step 4) Again create a file name it style.css with .css extension
Step 5) Paste These Code on style.css Page and save it.
Add this Code in style.css Page
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: Verdana, sans-serif;
}
a{
text-decoration: none;
color: #00B241;
}
.form-container{
background-color: #67BE4D;
width: 100%;
height: 100vh;
}
.form-control{
border: 1px solid white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
background-color: #FFFFFF;
padding: 30px 40px 40px 40px;
box-shadow: 0px 2px 10px #000;
}
.form-control h2{
text-transform: uppercase;
color: #515151;
}
input[type="text"],input[type="password"]{
width: 330px;
height: 50px;
border: none;
padding-left: 10px;
margin-top: 10px;
background-color: #F2F2F2;
font-size: 14px;
letter-spacing: 1px;
outline: none;
}
input[type="submit"]{
width: 330px;
height: 50px;
border: none;
text-transform: uppercase;
background-color: #00B241;
color: #FFFFFF;
letter-spacing: 1px;
font-size: 15px;
outline: none;
cursor: pointer;
}
0 Comments