In the blog post, we will be learning how to create a simple login form with HTML and CSS. Creating a login form is an essential aspect for many websites and applications. A login form is a form where users can write their username/email & password in order to access certain pages on website. We can make use of any dynamic website like Facebook or twitter.
Preview (Login form with HTML and CSS)
Here is a sample preview of the login form with HTML and CSS 👆
HTML
<!-- Login form with HTML and CSS -->
<div class="container">
<div class="pic">
<i class="fas fa-user"></i>
</div>
<h2 class="title">Login</h2>
<form class="form" method="POST">
<label for="username">Username</label>
<input type="text" id="username" class="input" autocomplete="off" placeholder="code.architects" />
<label for="password">Password</label>
<input type="text" id="password" class="input" autocomplete="off" placeholder="password" />
<button type="submit">Login</button>
</form>
</div>The .container will work as a parent element for the form. Where it will hold the center image, title & the form elements. Within the form, we have 2 labels, 1 for username and other for password. The input fields have class of input and id that will correspond to their respective labels. The username and password fields have autocomplete off in the example.
Finally, we have a submit button which will used to submit the form data when clicked upon.
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #4d3278;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: sans-serif;
}
.container {
max-width: 400px;
width: 100%;
background: #FFF;
padding: 40px;
border-radius: 20px;
position: relative;
}
.pic {
position: absolute;
top: 0;
left: 50%;
width: 80px;
height: 80px;
border-radius: 50%;
font-size: 24px;
color: #ffffff;
text-align: center;
line-height: 60px;
border: 10px solid #4d3278;
background: linear-gradient(to right, #9d50bb, #6e48aa);
transform: translate(-50%, -50%);
}
.form {
display: flex;
flex-direction: column;
}
.title {
text-align: center;
margin-top: 30px;
}
label,
.links,
button {
margin-top: 20px;
}
label {
margin-top: 20px;
font-size: 12px;
color: rgb(77, 77, 77);
font-weight: 600;
}
.input {
padding: 8px;
outline: none;
border: 0;
background: #EEE;
}
button {
background: linear-gradient(to right, #9d50bb, #6e48aa);
padding: 8px;
border: 0;
color: #fff;
font-size: 15px;
letter-spacing: 1px;
text-transform: uppercase;
}We have aligned the .container center with flexbox. The center image is position:absolute You can use any image to make the background more alive. Make sure the contrast is good enough between the background image and the form container element.
That’s it!! With these few lines of HTML and CSS, we were able to create a simple & yet attractive login form for our website. Also there are different ways you can customize your login form with style.
Read our other blogs here 👇
