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
- w3schools
- bootstrap (the most popular)
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 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
Demo: Bootstrap login form by shopinson.com
The complete resource codes for each login form
w3schools login form codes by w3chools
W3schools Login form
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
/* Full-width inputs */
input, input {
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%;
}
}
Username
Password
Login
Remember me
Cancel
Forgot password?
bootstrap login form codes by shopinson
Bootstrap Login form by shopinson.com
Username
Password
Forgot password?
Login
Remember me
