Every transactional website should have a login form that is responsive (fits or adjust properly well different devices)
So learning how to create a login form is good as well
Most important: every login form must be responsive (responsive login form)
The two popular resources used to create login form are
pros & cons: the most difference between the two resources
- w3schools you have custom style for the each element
- bootstrap already have a preset style for each element
- w3schools css style can be customized easily
- bootstrap css style takes a lot time and knowledge to be customized with disrupting the whole preset styles for it html element classes
2 steps to create a login form either with w3schools or bootstrap
step 1: adding html <form> tag and other building block elements
step 2: styling the form and tags with css classes from w3schools and bootstrap
Login form with w3schools
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>
){kind=link}