How TO create a Login Form (w3schools vs bootstrap)

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

  1. w3schools [demo]
  2. bootstrap (the most popular) [demo]

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>

Related

Best PHP checkdate alternative: How to do date validation in php (exclusive)

this checkdate alternative special function validates date in such...

How to validate date of birth today & get the age from the birthday using php

we have already explained how you can get age...

How to use php to check age for birthday messages

We going to check age for birthday messages using...

How to check product expiration duration of any product using php (2 proven function)

with this simple php trick you can check expiration...

the 2 easy ways to create dynamic form inputs in php

these are 2 ways you can create dynamic form...