How to create a responsive login form with CSS?
Responsive web design is used to create a webpage that looks good in all screen sizes. We generally browse a webpage on different devices like tablets, mobiles, desktops, laptops, and so on.
All these devices have different screen sizes. So the webpage should have the ability to shrink, adjust, enlarge or move contents according to screen sizes. This is achieved through the responsive design of the webpage.
In this tutorial, we are going to learn about the CSS properties which can be used to create a responsive login form.
Using media query
We can create a responsive web page that automatically adjusts itself according to the screen size using CSS media queries.
Media query is a CSS technique introduced in CSS3. It uses the @media rule if the condition is true. The CSS codes for different screen sizes can be included within the @media rule. The @media should be defined with some max-width or min-width property.
Example: Create a responsive login form with CSS
In this program, we have added the @media rule for the maximum screen size of 400px. The size of the login button and cancel button will have a width of 100% when the screen size is smaller than 400px.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<style>
form {
border: 1px solid gray; /* border to the form */
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 16px 16px;
margin: 10px 0;
display: inline-block;
border: 1px solid #cccccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #000544;
color: white;
padding: 16px 15px;
margin: 5px 0;
border: none;
cursor: pointer;
margin-left: 16px;
}
/* Add a hover effect for buttons */
button:hover {
opacity: 0.5;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
color: black;
padding: 10px 15px;
background-color: red;
margin-left: 16px;
}
.psw {
float: right;
padding-top: 16px;
padding-right:10px;
}
/* Change styles for span and cancel button on small screens */
@media screen and (max-width: 500px) {
span.psw {
display: block;
float: none;
}
button {
width: 100%;
margin-left: 0;
}
.cancelbtn {
width: 100%;
margin-left: 0;
}
}
</style>
<body>
<h2> Responsive login form</h2>
<form>
<div class="container">
<label><b> Username</b></label>
<input type="text" placeholder="Enter username" name="username">
<label> <b> Enter Password </b></label>
<input type="password" placeholder="Enter Password" name="password">
<button type="submit" > Login </button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#cccccc; margin-top: 50px;">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
</body>
</html>
Output
At normal large-size screen.
Output at small size screen
Example: Include @media rule for various breakpoint
We can add more than one @media rule within the same webpage. In this program, we have added three @media rules for three different sizes of the device. The buttons in the form change accordingly to the code specified under the @media rule.
Conclusion
In this tutorial, we have learned to create a responsive form using CSS. It can be done using the @media rule which has been introduced in CSS3. The screen size can be defined using max-width or min-width properties.
