In this post we will learn how to create a login form with the help of HTML. Creating login form in HTML is quite easy. If you have basic knowledge of HTML and CSS then it will not be difficult for you to create a login form.


How To Create A Login Form in HTML ?


Create A Login Form in HTML

Login Form Example:

Image

To create a login form in HTML, we follow the following steps:

Step (1) : First of all we write the following HTML code.

<form action="" method="GET">
<div class="img-container">
<img alt="Image" class="img" src="image.jpeg" />
</div>
<div class="container">
<label><b>Username</b></label>
<input name="uname" required="" type="text" />

<label><b>Password</b></label>
<input name="pwd" required="" type="password" />

<button type="submit">Login</button>
<label>
<input checked="checked" name="remember" type="checkbox" /> Remember me!
</label>
</div>

<div class="footer-container">
<span class="pwd"><a href="#">Forgot Passwrod?</a></span></div>
</form> code-box

Step (2) : In Next step we write CSS code as follows.

form {border: 3px solid #f2f2f2;font-family:sans-serif;}
input[type=text], input[type=password] {
width:100%;
padding: 10px 20px;
margin:8px 0;
display: inline-block;
border:1px solid #ccc;
box-sizing:border-box;
}

input[type=checkbox] {
appearance:auto;
}

button {
background-color: #555;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}

button:hover {
opacity: 0.8;
}

.img-container {
text-align: center;
margin: 24px 0 12px 0;
}

img.img {
width: 30%;
}

.container {padding: 16px;}
.footer-container{padding: 16px;background-color:#f2f2f2}; code-box

Summary

In this post we learn how to create a login form in HTML. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post