Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a responsive login form with CSS?
On a web page, a login form consists of fields for username and password. Also, a login button is created for the users to click on the button and login. A forgot password link is also placed for the users who forgot their account password. With that, “Remember Me” checkbox is also set so the users can select it and allow the browser to remember the password to avoid entering the password again and again. Let us create a responsive login form with CSS.
Set the form avatar image
We have placed an image in the beginning for the avatar profile using the <img> −
<div class="profilePic"> <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="Avatar" class="avatar" /> </div>
Set the height and width of the avatar image. Place it in the center −
.profilePic {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 200px;
height: 200px;
border-radius: 50%;
}
Create a form
We have created a form here with the username and password input fields. The placeholder is set using the placeholder attribute. A submit button is also created using the <button> element −
<div class="formFields">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required />
<label for="pass"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="pass"
required
/>
<button type="submit">Login</button>
<label> <input type="checkbox" checked="checked" name="remember" /> Remember me</label>
</div>
The input type text and password fields are styled like this. To position it and display, we have set the inline-block value of the display property −
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 30px;
}
Set the remember me checkbox
Using input type checkbox, the remember me checkbox is created −
<label> <input type="checkbox" checked="checked" name="remember" /> Remember me </label>
Set the forgot password link
A forget password link is also created for the users who forgot the password and want to recover −
<span class="pass">Forgot <a href="#">password?</a></span>
Float the forgot password link to the right −
span.pass {
float: right;
padding-top: 16px;
}
Set the responsiveness
Media Queries are used to set the responsiveness. The span is set to the block value of the display property when the screen size if less than 300px −
@media screen and (max-width: 300px) {
span.pass {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
Example
The following is the code to create a responsive login form with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(189, 189, 255);
}
form {
border: 3px solid #f1f1f1;
background-color: rgb(228, 228, 228);
margin: 20px;
}
h1 {
text-align: center;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 30px;
}
label {
font-size: 30px;
}
button {
font-weight: bold;
font-family: monospace, sans-serif, serif;
font-size: 25px;
background-color: #4caf50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.profilePic {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 200px;
height: 200px;
border-radius: 50%;
}
.formFields {
padding: 16px;
}
span.pass {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.pass {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Responsive Login Form Example</h1>
<form>
<div class="profilePic">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="Avatar" class="avatar" />
</div>
<div class="formFields">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required />
<label for="pass"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="pass"
required
/>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember" /> Remember me
</label>
</div>
<div class="formFields" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="pass">Forgot <a href="#">password?</a></span>
</div>
</form>
</body>
</html>
2K+ Views
