Create a Responsive Sign in / Login Form using HTML CSS Bootstrap & JavaScript

Web Development
Norbert BM1

In this Web Development tutorial you are goin to learn how to create a Sign in / Login Form using HTML CSS Bootstrap and JavaScript.

This is part of a complete series called the Multi step Form where I take you through the creation process of multiple forms like landing page, welcome page sign in page and registration with conformation page.

💖 Support The Channel by becoming a part of this community!

Complete Series : https://youtube.com/playlist?list=PL1XOgHNZBUvLIgI_JgZYQU55HehRqGUj-

Useful links:

Bootstrap: (CSS Framework) https://getbootstrap.com/

Font Awesome: (Icons for websites) https://fontawesome.com/

Table of content:

  • Create the Sign In form
  • Link up multiple HTML pages using a tag Create a welcome page using HTML CSS and Bootstrap
  • Styling the HTML Form using Bootstrap
  • Positioning X HTML element absolute using CSS
  • Creating inputs in a form
  • Creating a User name input in a form using HTML and CSS
  • Create a Checkbox in the form using HTML CSS and Bootstrap
  • Create a Form Submit Button using HTML Bootstrap
  • Using a img in the form using HTML and styling the image using CSS
  • Create alternative sign in Form using Facebook Twitter and Gmail
  • Creating social media colors using CSS Variables
  • Creating a footer for the Form
  • Create a Responsive Form
  • Validate the Form using Bootstrap
  • Create icon animation using JavaScript

Sign In Form source code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap CDN -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <!-- Font Awesome CDN -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
      integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="../style.css" />
    <title>Login</title>
  </head>
  <body>
    <!-- Todo: Create main container and columns with form and image -->
    <main class="row m-auto shadow bg-white px-0">
      <a href="../index.html"><i class="fa-solid fa-xmark"></i></a>
      <div class="col">
        <form
          action="./welcome.html"
          class="row g-3 needs-validation"
          novalidate
        >
          <h2 class="text-center mb-5">Sign-In</h2>
          <!-- Todo: Create form username and password inputs -->
          <div class="d-flex p-0">
            <i class="fa-solid fa-circle-user"></i>
            <input
              type="text"
              class="form-control"
              placeholder="Username of email"
              id="validationCustom01"
              required
            />
          </div>

          <div class="d-flex p-0">
            <i class="fa-solid fa-key"></i>
            <input
              type="password"
              class="form-control"
              placeholder="Password"
              id="validationCustom02"
              required
            />
          </div>

          <!-- Todo: Create form remember me checkbox and sign-in button -->

          <div class="d-flex p-0">
            <div class="col-8">
              <input type="checkbox" id="rememberMe" />
              <label for="rememberMe"> Remember me</label>
            </div>
            <div class="col-4 text-center">
              <button class="btn btn-primary px-3 w-100" type="submit">
                SIGN IN
              </button>
            </div>
          </div>

          <!-- Todo: Create form Register now and forgot password  -->

          <div class="d-flex p-0">
            <div class="col-8">
              <small>
                <a href="./register.html">Register now</a>
              </small>
            </div>
            <div class="col-4 text-center">
              <small>
                <a href="./forgotenPassword.html" class="text-secondary"
                  >Forgot password?</a
                >
              </small>
            </div>
          </div>

          <div class="d-flex p-0">
            <div class="col-5">
              <hr />
            </div>
            <div class="col-2 text-center">
              <small class="text-secondary"> or </small>
            </div>
            <div class="col-5 text-center">
              <hr />
            </div>
          </div>

          <!-- Todo: Create form alternative sign in with facebook, twitter and gmail -->

          <!-- todo: facebook -->
          <div class="d-flex justify-content-center p-0">
            <i class="fa-brands fa-facebook-square alt-logIn"></i>

            <a href="https://facebook.com/" class="col-11">
              <button type="button" class="btn btn-facebook w-100">
                SIGN IN WITH FACEBOOK
              </button>
            </a>
          </div>
          <!-- todo: twitter -->
          <div class="d-flex justify-content-center p-0">
            <i class="fa-brands fa-twitter-square alt-logIn"></i>

            <a href="https://twitter.com/" class="col-11">
              <button type="button" class="btn btn-twitter w-100">
                SIGN IN WITH TWITTER
              </button>
            </a>
          </div>
          <!-- todo: gmail -->
          <div class="d-flex justify-content-center p-0">
            <i class="fa-brands fa-google alt-logIn"></i>

            <a href="https://gmail.com/" class="col-11">
              <button type="button" class="btn btn-gmail w-100">
                SIGN IN WITH GMAIL
              </button>
            </a>
          </div>
        </form>

        <footer class="col text-center">
          <a href="https://norbertbm.com/">&copy;Menyhart Media</a>
        </footer>
      </div>

      <!-- Todo: Create main container and columns with form and image -->
      `
      <div class="col px-0">
        <img src="../img/windows-vfOtKkhHkbE-unsplash.jpg" alt="" />
      </div>
    </main>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <!--  Bootstrap JS CDN-->

    <!-- Todo: Implement Form Validation using Bootstrap  -->
    <script>
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function () {
        "use strict";

        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.querySelectorAll(".needs-validation");

        // Loop over them and prevent submission
        Array.prototype.slice.call(forms).forEach(function (form) {
          form.addEventListener(
            "submit",
            function (event) {
              if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
              }

              form.classList.add("was-validated");
            },
            false
          );
        });
      })();
    </script>
    <script src="../validation.js"></script>
  </body>
</html>

Welcome page source code

Here you can find the source code for the Welcome page. This page will be triggered when someone successfully sings in. In order to successfully sign in or login the input fields must be validated by tipping in any kind of information.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap CDN -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <!-- Font Awesome CDN -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
      integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="../style.css" />
    <title>Welcome</title>
  </head>
  <body>
    <div
      class="container text-center bg-white"
      style="height: 50vh; margin-top: 25vh"
    >
      <h1 class="display-1 my-5 py-5 fw-bolder">WELCOME</h1>
      <i class="fa-solid fa-face-smile-beam fa-10x text-success"></i>
    </div>
  </body>
</html>

Global CSS

* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
:root {
  --classicBlue: #34568b;
  --purple: #9f00a7;
  --pink: #ffc0c7;
  --darkPurple: #282a35;
  --bodyBg: #ccc;
  --customGray: #e6d6f6;
  --facebook: rgb(59, 89, 152);
  --twitter: rgb(29, 161, 242);
  --gmail: rgb(219, 68, 55);
}
body {
  background-color: var(--bodyBg);
}
main {
  position: relative;
  width: 1000px;
  height: 750px;
  top: 10vh;
  margin: auto;
}

.visible {
  display: block;
}
img {
  /* position: relative; */
  height: 750px;
  width: 100%;
}
.fa-xmark {
  position: absolute;
  top: 25px;
  left: 25px;
}
.fa-xmark:hover {
  cursor: pointer;
  color: #db4437;
}

form {
  width: 330px;
  margin: auto !important;
  /* margin-top: 10vh !important; */
}
.btn {
  color: #fff;
}

.fa-circle-user,
.fa-key,
.fa-envelope,
.fa-user,
.fa-code {
  border: 1px solid var(--customGray);
  padding: 0.5rem;
}

label[for="rememberMe"]:hover {
  text-decoration: underline;
  cursor: pointer;
}
label[for="rememberMe"]:hover > input {
  box-shadow: 0 0 5px 10px #333;
}
.alt-logIn {
  /* font-size: 1.1rem; */
  padding: 0.6rem;
  color: #fff;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.fa-facebook-square {
  background-color: rgb(39, 58, 100);
}
.btn-facebook {
  background-color: var(--facebook);
  color: #fff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.fa-twitter-square {
  background-color: rgb(24, 127, 192);
}
.btn-twitter {
  background-color: var(--twitter);
  color: #fff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.fa-google {
  background-color: rgb(153, 48, 39);
}
.btn-gmail {
  background-color: var(--gmail);

  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* TODO: Create and style a copy right in the footer   */

footer {
  position: relative;

  margin-top: 100px;
  /* height: 100%; */
}
footer:hover {
  cursor: pointer;
  color: var(--twitter);
}
/* TODO: Make sign in form Responsive  */
@media (max-width: 1000px) {
  main {
    max-width: 400px;
    height: 750px;
  }
  main div:nth-child(3) {
    display: none;
  }
}

function onBlurOnFocus(input, targeElement) {
  input.onfocus = (e) => {
    e.target.previousElementSibling.classList.toggle("text-primary");
    targeElement && targeElement.classList.toggle("text-primary");
  };
  input.onblur = (e) => {
    e.target.previousElementSibling.classList.toggle("text-primary");
    targeElement && targeElement.classList.toggle("text-primary");
  };
}
const email = document.querySelector("input[type=email]");

// let userInfo = [];
(function () {
  "use strict";

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll(".needs-validation");

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener(
      "submit",
      function (event) {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }

        form.classList.add("was-validated");
        console.log(userInfo);
      },
      false
    );
  });
})();

const inputs = document.querySelectorAll("input");

(function () {
  // console.log(Object.keys(inputs));
  Object.keys(inputs).map((key, input) => {
    // console.log(inputs[key]);
    onBlurOnFocus(inputs[key]);
  });

  // function onBlurOnFocus(input) {
  //   input.onfocus = (e) => {
  //     e.target.previousElementSibling.classList.toggle("text-primary");
  //   };
  //   input.onblur = (e) => {
  //     e.target.previousElementSibling.classList.toggle("text-primary");
  //   };
  // }
})();

1 thought on “Create a Responsive Sign in / Login Form using HTML CSS Bootstrap & JavaScript”

  1. Pingback: Registration Form using HTML CSS Bootstrap and Javascript - Menyhart Media

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.