learn how to create a responsive login form while comparing login form built with w3schools and bootstrap resources.
Every transactional website should have a responsive login form that adjusts perfectly to different devices. A responsive login form ensures a seamless user experience, as it makes it easy for users to log in from smartphones, tablets, and desktops. In this guide, we’ll walk you through the process of creating a responsive login form, and we’ll explore two popular resources for accomplishing this task: W3Schools and Bootstrap.
Most important: every login form must be responsive (responsive login form)
Why Responsive Login Forms Matter
Before we dive into the technical details, let’s understand why responsive login forms are crucial for any website.
- User Experience: Responsive design enhances the user experience, allowing visitors to log in without frustrating zooming or scrolling issues.
- Device Compatibility: With various devices in use today, a responsive login form ensures that users on different platforms can access your website comfortably.
- Professionalism: A well-designed login form reflects the professionalism and attention to detail of your website.
The two popular resources used to create login form are
Now, let’s explore the two resources you can use to create responsive login forms:
W3Schools
W3Schools is a popular educational platform that provides a demo of a responsive login form. Here are the pros and cons of using W3Schools for your login form:
Pros:
- Custom Styling: W3Schools allows you to create custom styles for each element, giving you complete control over the form’s appearance.
- CSS Customization: You can easily customize the CSS styles to match your website’s design.
Cons:
- More Effort: Creating a login form from scratch with custom styles may require more effort compared to using pre-designed solutions.
- Learning Curve: You need to have some CSS knowledge to customize the styles effectively.
Here are the steps to create a responsive login form using W3Schools:
Step 1: Adding HTML <form> Tag and Building Block Elements
In this step, you start by adding the HTML <form> tag and other necessary elements like text inputs and buttons. Ensure that the form is structured properly.
Step 2: Styling the Form and Tags with CSS Classes from W3Schools
To make your form responsive, apply CSS styles to the form and its elements. W3Schools provides CSS code that you can use to style your form. Be sure to adjust the styles to match your website’s design.
Bootstrap
Bootstrap is one of the most popular front-end frameworks for building responsive websites. It offers pre-designed components, including a responsive login form. Here are the pros and cons of using Bootstrap:
Pros:
- Preset Styles: Bootstrap comes with preset styles for form elements, making it easy to create a professional-looking login form.
- Rapid Development: You can create a responsive login form quickly using Bootstrap’s predefined classes.
Cons:
- Limited Customization: While Bootstrap offers convenience, extensive customization may disrupt the default styles for HTML element classes.
- Learning Bootstrap: If you’re new to Bootstrap, there might be a learning curve.
Here are the steps to create a responsive login form using Bootstrap:
Step 1: Adding HTML <form> Tag and Building Block Elements
Begin by adding the HTML <form> tag and other elements inside it. Bootstrap uses its classes for styling, so you’ll need to structure your form accordingly.
Step 2: Styling the Form with Bootstrap Classes
To make your form responsive, apply Bootstrap classes to form elements. Bootstrap provides predefined classes for various form components, making it easy to create a responsive design.
w3schools Demo by w3schools
click demo button below to view the w3schools login form
Bootstrap Demo by shopinson
click on the button below to see our bootstrap login form
The complete resource codes for each login form
w3schools login form codes by w3chools
<!DOCTYPE html>
<html>
<head>
<title>W3schools Login form</title>
<style>
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
/* Full-width inputs */
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;
}
/* Set a style for all buttons */
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Add a hover effect for buttons */
button:hover {
opacity: 0.8;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}
/* Add padding to containers */
.container {
padding: 16px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<form action="action_page.php" method="post">
<div class="imgcontainer">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
</body>
</html>
bootstrap login form codes by shopinson
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Login form by shopinson.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<form action="action_page.php" class="container" method="post">
<div class="row">
<div class="col col-9 mx-auto my-4 py-3 shadow-lg">
<div class="container-fluid text-center">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="rounded-circle img-fluid">
</div>
<div class="container-fluid">
<label class="form-label" for="uname"><b>Username</b></label>
<input type="text" class="form-control mb-2" placeholder="Enter Username" name="uname" required>
<label class="form-label" for="psw"><b>Password</b></label>
<input type="password" class="form-control mb-0" placeholder="Enter Password" name="psw" required><p class="text-link small mb-2 text-end">Forgot <a href="#">password?</a></p>
<button type="submit" class="btn btn-lg btn-success mb-2 d-inline-flex">Login</button>
<div class="form-check d-inline-flex">
<input type="checkbox" class="form-check-input d-inline" checked="checked" name="remember">
<label class="form-check-label" for="remember">
Remember me
</label>
</div>
</div>
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
