How To Create Login Form In HTML and CSS Make Sign In Form Design

Tutorial Description :

In this Tutorial we will create a simple Login Form using HTML and CSS. Forms are one of the first thing that you learn at the beginning of Web Development so this should be useful.

I will also use pseudo element and pseudo classes as hover, after, before, and active in order to hide and make content visible .

Img:

Useful links:

Font Awesome
Google Fonts

HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Log in Form</title>
  </head>
  <body>
 
    <form
      action="https://www.google.com/"
      method="GET"
      target="_blank"
      class="login_form"
    >
      <div class="user_logo">
        <i class="fa fa-user"></i>
      </div>
      <h1>Login</h1>
      <label for="name" class="user">User name</label>
      <input type="text" placeholder="Enter Username" required />

      <label for="password" class="user">Password</label>
      <input type="password" placeholder="Enter password" required />
      <div class="checkbox_container">
        <input type="checkbox" id="checkbox" />
        <a href="">
          <label for="checkbox">Remember me</label>
        </a>
      </div>
      <input type="submit" value="Login" />
      <div class="more">
        <label for=""><a href="#">Forgot you password?</a></label>
        <label for=""><a href="#">Create new account!</a></label>
      </div>
    </form>
    <script src="app.js"></script>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  font-family: sans-serif;
  background: url(/img/ales-nesetril-Im7lZjxeLhg-unsplash.jpg) no-repeat center
    center/cover;
}

.login_form {
  width: 320px;
  height: 520px;
  background-color: rgba(1, 1, 1, 0.4);
  border: 1px solid black;
  box-shadow: 0 0 5px 2px #111;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  color: #fff;
  border-top: 1px solid white;
}
.user_logo {
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  left: calc(320px / 3.5);
  top: -70px;
}
.user_logo i {
  font-size: 5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login_form h1 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 2rem;
  letter-spacing: 2px;
}

.login_form label,
.login_form input {
  display: block;
  width: 100%;
  padding: 0.5rem;
}
.login_form .user {
  font-size: 1.2rem;
  font-weight: 600;
}
.login_form input[type="text"],
input[type="password"] {
  border: none;
  background: transparent;
  border-bottom: 1px solid black;
  color: #fff;
}

input::placeholder {
  height: 50px;
  color: lightgray;
  letter-spacing: 2px;
}
.login_form input[type="text"]:focus,
.login_form input[type="password"]:focus {
  background-color: red;
  letter-spacing: 1px;
}

.checkbox_container {
  padding: 0.5rem 0;
  color: white;
}
.checkbox_container label,
.checkbox_container input {
  display: inline;
  width: 50px;
  color: darkgray;
  text-decoration: none;
}
.checkbox_container a {
  text-decoration: none;
}

/* Submit */

.login_form input[type="submit"] {
  background-color: red;
  border: none;
  border-radius: 25px;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 1px;
  font-weight: 500;
}

.login_form input[type="submit"]:hover {
  background: linear-gradient(to right, rgb(41, 115, 158), rgb(175, 63, 18));
  color: white;
  cursor: pointer;
}
.login_form input[type="submit"]:active {
  background: greenyellow;
  color: black;
  outline: none;
}

.more {
  margin-top: 1rem;
  text-align: center;
}
.more a {
  color: darkgray;
  text-decoration: none;
  letter-spacing: 1px;
  margin: auto;
}
.more a:hover {
  color: white;
}

Part 2 Show | Hide Form using Java Script

Tutorial Description :

In this Tutorial we will expend on our previous Tutorial by making the Login Form Show / Hide using Java Script, and also using @keyframe animation in CSS. In order to aceave this we first need to make a few modification to our initial HTML and CSS code.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Log in Form</title>
  </head>
  <body>
    <section class="form_container">
      <div class="user_logo">
        <i class="fa fa-user"></i>
      </div>
      <form
        action="https://www.google.com/"
        method="GET"
        target="_blank"
        class="login_form"
      >
        <h1>Login</h1>
        <label for="name" class="user">User name</label>
        <input type="text" placeholder="Enter Username" required />

        <label for="password" class="user">Password</label>
        <input type="password" placeholder="Enter password" required />
        <div class="checkbox_container">
          <input type="checkbox" id="checkbox" />
          <a href="">
            <label for="checkbox">Remember me</label>
          </a>
        </div>
        <input type="submit" value="Login" />
        <div class="more">
          <label for=""><a href="#">Forgot you password?</a></label>
          <label for=""><a href="#">Create new account!</a></label>
        </div>
      </form>
    </section>
    <script src="app.js"></script>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  font-family: sans-serif;
  background: url(/img/ales-nesetril-Im7lZjxeLhg-unsplash.jpg) no-repeat center
    center/cover;
}

.user_logo {
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  left: calc(320px / 3.5);
  top: -70px;
}
.user_logo i {
  font-size: 5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login_form h1 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 2rem;
  letter-spacing: 2px;
}

.login_form label,
.login_form input {
  display: block;
  width: 100%;
  padding: 0.5rem;
}
.login_form .user {
  font-size: 1.2rem;
  font-weight: 600;
}
.login_form input[type="text"],
input[type="password"] {
  border: none;
  background: transparent;
  border-bottom: 1px solid black;
  color: #fff;
}

input::placeholder {
  height: 50px;
  color: lightgray;
  letter-spacing: 2px;
}
.login_form input[type="text"]:focus,
.login_form input[type="password"]:focus {
  background-color: red;
  letter-spacing: 1px;
}

.checkbox_container {
  padding: 0.5rem 0;
  color: white;
}
.checkbox_container label,
.checkbox_container input {
  display: inline;
  width: 50px;
  color: darkgray;
  text-decoration: none;
}
.checkbox_container a {
  text-decoration: none;
}

/* Submit */

.login_form input[type="submit"] {
  background-color: red;
  border: none;
  border-radius: 25px;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 1px;
  font-weight: 500;
}

.login_form input[type="submit"]:hover {
  background: linear-gradient(to right, rgb(41, 115, 158), rgb(175, 63, 18));
  color: white;
  cursor: pointer;
}
.login_form input[type="submit"]:active {
  background: greenyellow;
  color: black;
  outline: none;
}

.more {
  margin-top: 1rem;
  text-align: center;
}
.more a {
  color: darkgray;
  text-decoration: none;
  letter-spacing: 1px;
  margin: auto;
}
.more a:hover {
  color: white;
}
/* Step 2 */
.form_container {
  width: 320px;
  height: 520px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-top: 1px solid white;
}
.login_form {
  width: 100%;
  height: 100%;
  background-color: rgba(1, 1, 1, 0.4);
  border: 1px solid black;
  box-shadow: 0 0 5px 2px #111;
  position: absolute;
  top: 0;
  left: 0;
  padding: 4rem 1rem;
  color: #fff;
  border-top: 1px solid white;
  display: none;
  animation: form 0.4s ease-out;
}
@keyframes form {
  0% {
    opacity: 0;
    top: 0px;
  }
  70% {
    opacity: 0;
    top: -100px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
.login_form.active {
  display: block;
}

.user_logo {
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  top: -50px;
  left: 100px;
  z-index: 1;
  cursor: pointer;
}
.user_logo:hover i {
  color: white;
}

JS:

const logo = document.querySelector(".user_logo");
const form = document.querySelector(".login_form");

logo.addEventListener("click", () => {
  form.classList.toggle("active");
});

My Udemy Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

Basic PC/Mac Knowledge
Beginner Curiosity

Description

This is a beginner friendly course. This course will tech you the Foundations of Web Development. This a more practical orientate Course. Aldo we will start up slow with some basic definitions, the main focus here is to have as much as possible hands on experience. Learning by doing is the key word. That means Examples, Assignments and Exercises!

At this point I would like to invite you to join me on this journey and enrich yourself with the foundations of web development. In this Course You will learn Modern HTML 5, CSS 3, and JavaScript, and through applying them you will be able to building from Easy to progressively more complex responsive Responsive Web Pages.

Throughout the course we cover tons of tools and technologies including:

HTML5
CSS3
CSS FelxBox
CSS Grid Layout
Projects
SASS
JavaScript
DOM Manipulation
JSON
Projects , Projects and more Projects 🙂

Two Important Notes about this Course:

1. This is a hands-on Learning by doing Course. This means that we are going to start up Slowly with basic definitions in HTML and CSS and then we will combine them together by building the structure and applying design to our sites. After that we will apply JS in order to make the Site do Thinks.

2. Is that I will be constantly Updating the Content with New Documentation, Examples and Exercises in order to bring you as much value as possible. So you can always lean beck on this Course if you want to refresh your memory about something.

Bonus!

3. The most important thing the you need to know in life is where to find the information you need!Who this course is for:

Beginner Web Developers
Beginner Web Designers
Beginner HTML
Beginner CSS
Beginner SASS / SCSS
Beginner JavaScript

Part 3 Social Media Buttons and Animated Input tags and Labels

How To Create Login Form In HTML and CSS Make Sign In Form Design Part 2

Tutorial Description :

In this Tutorial we will create a simple Login Form using HTML and CSS. with animated social media buttons and input tags and labels. we will achieve this by CSS3 grid, flexbox, pseudo classes such as :hover, :active, :focus, :valid .

This Tutorial is a extension of my previous to tutorials:

Part -1: How To Create Login Form In HTML and CSS Make Sign In Form Design

Part-2: How To Create Login Form In HTML and CSS Show | Hide Form using Java Script

Useful links:

Font Awesome
Google Fonts

index HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <script
      src="https://kit.fontawesome.com/75e53ee709.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="style.css" />
    <title>Log in Form</title>
  </head>
  <body>
    <section class="form_container">
      <div class="user_logo">
        <i class="fa fa-user"></i>
      </div>
      <form action="/home.html" method="GET" target="_blank" class="login_form">
        <h1>Login</h1>
        <!-- User name -->
        <div class="input-field User">
          <input type="text" class="user" required />
          <label for="name" class="user">User name</label>
        </div>
        <!-- Password -->
        <div class="input-field Password">
          <input type="password" class="user" required />
          <label for="password" class="user">Password</label>
        </div>
        <div class="checkbox_container">
          <input type="checkbox" id="checkbox" />
          <a href="">
            <label for="checkbox" class="remember">Remember me</label>
          </a>
        </div>
        <input type="submit" value="Login" />
        <label for="" class="or">- or -</label>
        <div class="links">
          <div class="facebook">
            <a href="https://www.facebook.com/">
              <i class="fab fa-facebook"><span>facebook</span></i>
            </a>
          </div>
          <div class="linkedin">
            <a href="https://www.linkedin.com/">
              <i class="fab fa-linkedin"><span>linkedin</span></i>
            </a>
          </div>
        </div>
        <div class="more">
          <label for=""><a href="#">Forgot you password?</a></label>
          <label for=""><a href="#">Create new account!</a></label>
        </div>
      </form>
    </section>
    <script src="app.js"></script>
  </body>
</html>

home HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <script
      src="https://kit.fontawesome.com/75e53ee709.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="style.css" />
    <title>Home</title>
  </head>
  <body>
    <header id="home">
      <h1>Welcome</h1>
    </header>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  font-family: sans-serif;
  background: url(/img/ales-nesetril-Im7lZjxeLhg-unsplash.jpg) no-repeat center
    center/cover;
}

.user_logo {
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  left: calc(320px / 3.5);
  top: -70px;
}
.user_logo i {
  font-size: 5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login_form h1 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 2rem;
  letter-spacing: 2px;
}

.login_form label,
.login_form input {
  display: block;
  width: 100%;
  padding: 0.5rem;
}
.login_form .user {
  font-size: 1.2rem;
  font-weight: 600;
}
.login_form input[type="text"],
input[type="password"] {
  border: none;
  background: transparent;
  border-bottom: 1px solid black;
  color: #fff;
}

input::placeholder {
  height: 50px;
  color: lightgray;
  letter-spacing: 2px;
}
.login_form input[type="text"]:focus,
.login_form input[type="password"]:focus {
  background-color: red;
  letter-spacing: 1px;
}

.checkbox_container {
  padding: 0.5rem 0;
  color: white;
}
.checkbox_container label,
.checkbox_container input {
  display: inline;
  width: 50px;
  color: darkgray;
  text-decoration: none;
}
.checkbox_container a {
  text-decoration: none;
}

/* Submit */

.login_form input[type="submit"] {
  background-color: red;
  border: none;
  border-radius: 25px;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 1px;
  font-weight: 500;
  box-shadow: 0 0 10px 2px black;
}

.login_form input[type="submit"]:hover {
  background: linear-gradient(to right, rgb(41, 115, 158), rgb(175, 63, 18));
  color: white;
  cursor: pointer;
}
.login_form input[type="submit"]:active {
  background: greenyellow;
  color: black;
  outline: none;
}

.more {
  margin-top: 1rem;
  text-align: center;
}
.more a {
  color: darkgray;
  text-decoration: none;
  letter-spacing: 1px;
  margin: auto;
}
.more a:hover {
  color: white;
}
/* Step 2 */
.form_container {
  width: 320px;
  height: 520px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-top: 1px solid white;
}
.login_form {
  width: 100%;
  height: 100%;
  background-color: rgba(1, 1, 1, 0.4);
  border: 1px solid black;
  box-shadow: 0 0 5px 2px #111;
  position: absolute;
  top: 0;
  left: 0;
  padding: 4rem 1rem;
  color: #fff;
  border-top: 1px solid white;
  display: none;
  animation: form 0.4s ease-out;
}
@keyframes form {
  0% {
    opacity: 0;
    top: 0px;
  }
  70% {
    opacity: 0;
    top: -100px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
.login_form.active {
  display: block;
}

.user_logo {
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  top: -50px;
  left: 100px;
  z-index: 1;
  cursor: pointer;
}
.user_logo:hover i {
  color: white;
}
/* Part 3 Including Social login and label transition effect  */
.remember {
  cursor: pointer;
}
.or {
  text-align: center;
  font-size: 1.2rem;
}

.form_container {
  height: 580px;
}

.login_form input.user {
  height: 100%;
  width: 100%;
  font-size: 1.2rem;
  transition: 0.5s;
  border-radius: 25px;
  outline: none;
  box-shadow: inset 0 0 5px 1px black;
  background-color: rgba(225, 0, 0, 0.2);
}

.login_form:focus ~ label.user,
.login_form:valid ~ label.user,
.login_form input.user:focus ~ label.user,
.login_form input.user:valid ~ label.user {
  transform: translateY(-50px);
  font-size: 1rem;
  color: white;
}
.login_form label.user {
  position: relative;
  top: -20px;
  transform: translateY(-50%);
  padding-left: 1rem;
  font-size: 1.1rem;
  color: darkgray;
  transition: 0.5s;
  pointer-events: none;
}
/* Social Links alt Login */

.login_form .links {
  display: flex;
  cursor: pointer;
  margin-top: 1rem;
}
.login_form .links .facebook,
.login_form .links .linkedin {
  display: flex;
  justify-content: center;
  justify-self: center;
  height: 40px;
  width: 100%;
  border: 1px solid black;
  margin: 0 10px;
  text-align: center;
  background-color: transparent;
  box-shadow: 0 0 4px 1px black;
  border-radius: 25px;
  align-items: center;
}
.login_form .links .facebook span,
.login_form .links .linkedin span {
  padding-left: 0.5rem;
  font-weight: 700;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
/* facebook i */
.login_form .links .facebook i,
.login_form .links .facebook span {
  color: #4267b2;
  font-size: large;
  transition: all 0.5s ease-in;
}
.login_form .links .facebook:hover {
  border: 1px solid #4267b2;
  background-color: #4267b2;
  box-shadow: 0 0 3px 1px #4267b2;
}
.login_form .links .facebook:hover i,
.login_form .links .facebook:hover span {
  color: white;
}
/* linkedin i */
.login_form .links .linkedin i,
.login_form .links .linkedin span {
  color: #0092bb;
  font-size: large;
  transition: all 0.5s ease-in;
}
.login_form .links .linkedin:hover {
  border: 1px solid #0092bb;
  background-color: #0092bb;
  box-shadow: 0 0 3px 1px #0092bb;
}
.login_form .links .linkedin:hover i,
.login_form .links .linkedin:hover span {
  color: white;
}
/* Home Page */
#home h1 {
  color: white;
  font-size: 10rem;
  text-align: center;
}

Part 4 Generate random Password | random code using Java Script 1/2

Tutorial Description :

In this Tutorial we will create a Random Password / Random Code generator Form using HTML CSS and JavaScript. with animated social media buttons and input tags and labels. we will achieve this by CSS3 grid, flexbox, pseudo classes such as :hover, :active, :focus, :valid .

This Tutorial is a extension of my previous tutorials:

Part -1: How To Create Login Form In HTML and CSS Make Sign In Form Design

Part-2: How To Create Login Form In HTML and CSS Show | Hide Form using Java Script

Part-3 Social Media Buttons and Animated Input tags and Labels

Useful links:

Font Awesome
Google Fonts

Reset Password HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <script
      src="https://kit.fontawesome.com/75e53ee709.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="style.css" />
    <title>Reset Password</title>
  </head>
  <body>
    <header id="home">
      <h1>Forgot your Password?</h1>
    </header>
    <section class="form_container request_password">
      <div class="user_logo">
        <i class="fas fa-frown"></i>
      </div>
      <section class="request-verify_container">
        <form
          action=""
          class="login_form request_password_form"
          onsubmit="alert('Code generated');return false"
        >
          <h2>Request a reset Code</h2>
          <!-- User name -->
          <div class="input-field User">
            <input type="text" class="user" id="UserName" required />
            <label for="name" class="user" name="UserName">User name</label>
          </div>
          <!-- User Email -->
          <div class="input-field email">
            <input type="email" class="user" required id="UserEmail" />
            <label for="email" class="user" name="UserEmail">
              Email Address</label
            >
          </div>
          <h2 id="DisplayUserName">User Name and Email</h2>
          <!-- Reset code Container -->
          <label for="">Your Reset Code:</label>
          <div id="requestCode_container">
            <input
              type="text"
              name="requestCode"
              id="requestCode"
              style="text-align: center;"
            />
          </div>

          <input type="submit" value="Request" id="generateCode" />

          <div class="links">
            <div class="facebook">
              <a href="/index.html">
                <span>Back to Login</span>
              </a>
            </div>
          </div>
          <div class="more">
            <label for=""><a href="#">Create new account!</a></label>
          </div>
        </form>
        <!-- New Password Form -->

        <form
          action=""
          class="login_form"
          id="newPassword"
          onsubmit="return false"
        >
          <div class="success_logo">
            <i class="fas fa-grin-alt"></i>
          </div>
          <h2>Reset password</h2>
          <!-- reset code input -->
          <div class="input-field ">
            <input
              type="text"
              class="user"
              required
              id="VerifyRequestCode"
              name="VerifyRequestCode"
            />
            <label for="VerifyRequestCode" class="user" id="user">
              Reset Code</label
            >
          </div>
          <!-- New Password  input -->
          <div class="input-field ">
            <input type="password" class="user" id="NewPassword-1" />
            <label for="NewPassword-1" class="user" id="user">
              New Password</label
            >
          </div>
          <!-- Repeat Password  input -->
          <div class="input-field ">
            <input type="password" class="user" id="NewPassword-2" />
            <label for="NewPassword-2" class="user" id="user">
              Repeat Password</label
            >
          </div>
          <!-- Show Password -->

          <label for="ShowPassword" class="ShowPassword_container">
            <i class="far fa-eye" id="ShowPassword"></i>
            <span>Show Password</span>
          </label>
          <input type="submit" value="Reset" id="resetPassword" />
        </form>
      </section>
    </section>
    <script src="app.js"></script>
  </body>
</html>

CSS:

/*  Forgot Password*/
.request_password_form h2 {
  text-align: center;
  margin-bottom: 2rem;
}
#home h1 {
  font-size: 2.5rem;
}
.request_password_form input[type="email"] {
  border: none;
  background-color: transparent;
  border-bottom: 1px solid black;
  color: #fff;
}
.request_password_form input[type="email"]:focus {
  background-color: red;
  letter-spacing: 1px;
}
.request_password {
  width: 820px;
  height: 620px;
}

.request-verify_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.request_password_form {
  max-width: 50%;
}
#newPassword {
  max-width: 50%;
  height: 100%;
  left: 50%;
  top: 0;
  color: white;
  padding: 2rem 1rem;
  animation: reset_form 0.8s ease;
  display: none;
  /* display: block; */
}

@keyframes reset_form {
  0% {
    opacity: 0;
    right: -50%;
  }
  30% {
    opacity: 0;
    left: 10%;
  }
  100% {
    opacity: 1;
    right: 100%;
  }
}

#newPassword h2 {
  position: relative;
  margin-bottom: 2rem;
  text-align: center;
}
#requestCode_container {
  display: grid;
  width: 100%;
  grid-template-columns: 50% 50%;
  font-size: 1.2rem;
  display: none;
}
#requestCode_container i {
  cursor: pointer;
}
.success_logo {
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  left: calc(320px / 2.5);
  top: -80px;
  z-index: 1;
  cursor: pointer;
}

.success_logo i {
  font-size: 5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#requestCode {
  text-align: center;
  background-color: white;
  color: black;
  font-size: large;
  font-weight: 600;
  margin-bottom: 1rem;
  width: 100%;
}
.ShowPassword_container {
  padding: 0;
  margin: 0;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: darkgray;
}
.ShowPassword_container:hover #ShowPassword {
  cursor: pointer;
  color: white;
}
#ShowPassword {
  padding-right: 1rem;
}

Part 4 Generate random Password | random code using Java Script 2/2

Tutorial Description :

This Tutorial is a extension of my previous tutorials:

Part -1: How To Create Login Form In HTML and CSS Make Sign In Form Design

Part-2: How To Create Login Form In HTML and CSS Show | Hide Form using Java Script

Part-3: Social Media Buttons and Animated Input tags and Labels

Part-4: Generate random Password | random code using Java Script 1/2

JS:


// Forgot Password
function random_code_generate(max, min) {
  const codeChars =
    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^*_";
  const CharMath = Math.floor(Math.random() * (max - min + 1)) + min;
  const randCode = Array(CharMath)
    .fill(codeChars)
    .map(function(x) {
      return x[Math.floor(Math.random() * x.length)];
    })

    .join("");
  return randCode;
}

// Display

document.getElementById("generateCode").addEventListener("click", function() {
  // Start get ID of user and display it
  const getUserID =
    document.getElementById("UserName").value +
    "<br>" +
    document.getElementById("UserEmail").value;
  const DisplayUserID = (document.getElementById(
    "DisplayUserName"
  ).innerHTML = getUserID);

  // End get ID of user and display it

  // Display request code
  random_code = random_code_generate(10, 5);
  // get request code field from the DOM
  const displayCodeContainer = document.getElementById("requestCode_container");

  const requestCode = document.getElementById("requestCode");
  requestCode.value = random_code;

  const newPassword = document.getElementById("newPassword");

  const userName = document.getElementById("UserName");
  const userEmail = document.getElementById("UserEmail");
  if (userName.value === "" || userEmail.value === "") {
    newPassword.style.display = "none";
    displayCodeContainer.style.display = "none";
  } else {
    // display Code Container
    displayCodeContainer.style.display = "block";
    // Clear User Name and Email Fields
    userName.value = "";
    userEmail.value = "";
    // Display the New Password Form
    newPassword.style.display = "block";
  }
});
// Display hidden password
const x = document.getElementById("NewPassword-1");
const y = document.getElementById("NewPassword-2");

function ShowPassword() {
  if (x.type === "password" && y.type === "password") {
    x.type = "text";
    y.type = "text";
  } else {
    x.type = "password";
    y.type = "password";
  }
}
document.querySelector("#ShowPassword").addEventListener("click", ShowPassword);
// Start Check if fields are not empty and if Password Mach
const VerifyRequestCode = document.getElementById("VerifyRequestCode");
const RequestCode = document.getElementById("requestCode");
function resetPassword() {
  //  Check if all fields are completed
  if (x.value !== y.value || (x.value == "" && y.value == "")) {
    alert("Place check if: Passwords Mach and All fields are completed ");
  }
  // Check if reset Code matches
  else if (VerifyRequestCode.value !== RequestCode.value) {
    alert("Verification Code is Not Correct ");
  } else {
    alert("Password Reset Successful");
  }
}

// Call the  resetPassword function
document
  .getElementById("resetPassword")
  .addEventListener("click", resetPassword);

Part 5 Local Storage using Java Script

Tutorial Description :

In this Tutorial we will create a Create Account Form which will store information in the local Storage of the DOM using HTML CSS and JavaScript. W e will achieve this by CSS3 grid, flexbox, pseudo classes such as :hover, :active, :focus, :valid .

This Tutorial is a extension of my previous tutorials:

Part -1: How To Create Login Form In HTML and CSS Make Sign In Form Design

Part-2: How To Create Login Form In HTML and CSS Show | Hide Form using Java Script

Part-3: Social Media Buttons and Animated Input tags and Labels

Part-4: Generate random Password | random code using Java Script 1/2 & 2/2

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <script
      src="https://kit.fontawesome.com/75e53ee709.js"
      crossorigin="anonymous"
    ></script>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Create an Account</title>
  </head>
  <body>
    <section class="form_container account_container">
      <div class="user_logo">
        <i class="fas fa-user-plus"></i>
      </div>
      <form action="#" class="login_form" id="CreateAccount">
        <h1>Create Account</h1>
        
        <section class="inputs_container">
            <!-- firstName -->
          <div class="input-field ">
            <input type="text" id="FirstName" class="user" required />
            <label for="name" class="user" id="firstName">First Name</label>
          </div>
          <!-- lastName -->
          <div class="input-field ">
            <input type="text" id="LastName" class="user" required />
            <label for="name" class="user" id="lastName">Last Name</label>
          </div>
          <!-- Email -->
          <div class="input-field ">
            <input type="email" id="UserEmail" class="user" required />
            <label for="name" class="user" id="email">Email address</label>
          </div>

          <!-- User Password  -->
          <div class="input-field ">
            <input type="password" id="UserPassword-1" class="user" required />
            <label for="password" class="user">Password</label>
          </div>
         
          
        </section>
        <input type="submit" value="Register" />
        <br>
        <table class="users_table">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Email</th>
              <th>Password</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="user-list"></tbody>
      </form>
      
      </table>
    </section>
   <script src="app.js"></script>
   <script src="localStorage.js"></script>
  </body>
</html>

CSS:

/* Users List */
.account_container {
  margin: auto;
  font-family: "Roboto", sans-serif;
  letter-spacing: 1px;
  width: 850px;
  display: flex;
}
 
#CreateAccount h1 {
  font-size: 2rem;
}
#CreateAccount .inputs_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.users_table {
  background-color: rgba(1, 1, 1, 0.6);
  color: white;
  border: 1px solid black;
  box-shadow: 0 0 5px 2px #111;
  width: 100%;
}
.users_table th {
  font-size: 1.2rem;
  /* color: red; */
}
.users_table tbody tr:nth-child(odd) {
  background-color: rgba(225, 0, 0, 0.2);
  /* color: white; */
  padding: 2rem 0;
}
.users_table tbody td {
  padding: 1rem 0.5rem;
  font-size: 1.2rem;
}
.deleteUser {
  color: white;
  text-decoration: none;
  font-weight: 700;
}

JS:

// Local User Storage

// Form
const createAccount = document.getElementById("CreateAccount");

// Inputs
const firstName = document.getElementById("FirstName");
const lastName = document.getElementById("LastName");
const userEmail = document.getElementById("UserEmail");
const userPassword_1 = document.getElementById("UserPassword-1");
const userPassword_2 = document.getElementById("UserPassword-2");

// User Table
const userList = document.getElementById("user-list");

// User Interface

// Function  CreateUser
function CreateUser(firstName, lastName, userEmail, userPassword_1) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.userEmail = userEmail;
  this.password = userPassword_1;
}

// UserInterface Class

class UI {
  static displayUsers() {
    const users = Store.getUsers();

    users.forEach(user => UI.addUserToList(user));
  }

  static addUserToList(user) {
    const row = document.createElement("tr");

    row.innerHTML = `
        <td>${user.firstName}</td>
        <td>${user.lastName}</td>
        <td>${user.userEmail}</td>
        <td>${user.password}</td>
        <td><a href="#" class="deleteUser">X</a></td>
      `;
    {
    }
    userList.appendChild(row);
  }

  static deleteUser(el) {
    if (el.classList.contains("deleteUser")) {
      el.parentElement.parentElement.remove();
    }
  }
  static clearFields() {
    firstName.value = "";
    lastName.value = "";
    userEmail.value = "";
    userPassword_1.value = "";
    userPassword_2.value = "";
  }
}

// Local Storage Class: Handles Storage
class Store {
  static getUsers() {
    let users;
    if (localStorage.getItem("users") === null) {
      users = [];
    } else {
      users = JSON.parse(localStorage.getItem("users"));
    }

    return users;
  }

  static addUser(user) {
    const users = Store.getUsers();
    users.push(user);
    localStorage.setItem("users", JSON.stringify(users));
  }

  static removeUser(userEmail) {
    const users = Store.getUsers();

    users.forEach((user, index) => {
      if (user.userEmail === userEmail) {
        users.splice(index, 1);
      }
    });

    localStorage.setItem("users", JSON.stringify(users));
  }
}

// Event: Display Users
document.addEventListener("DOMContentLoaded", UI.displayUsers);

// Event: Add a User

function addUser() {
  const user = new CreateUser(
    firstName.value,
    lastName.value,
    userEmail.value,
    userPassword_1.value
  );
  if (user != "") {

    // Add user to UI
    UI.addUserToList(user);

    // Add user to store
    Store.addUser(user);
    // Clear fields
    UI.clearFields();
  }
}
// Call function  addUser
createAccount.addEventListener("submit", addUser);

// Event: Remove a User

function removeUser(e) {
  // Remove user from UI
  UI.deleteUser(e.target);

  // Remove user from store
  Store.removeUser(
    e.target.parentElement.previousElementSibling.previousElementSibling
      .textContent
  );
}
// Call function  removeUser
userList.addEventListener("click", removeUser);

My Udemy Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

Basic PC/Mac Knowledge
Beginner Curiosity

Description

Throughout the course we cover tons of tools and technologies including:

HTML5
CSS3
CSS FelxBox
CSS Grid Layout
Projects
SASS
JavaScript
DOM Manipulation
JSON
Projects , Projects and more Projects 🙂

Two Important Notes about this Course:

Bonus!

3. The most important thing the you need to know in life is where to find the information you need!Who this course is for:

Beginner Web Developers
Beginner Web Designers
Beginner HTML
Beginner CSS
Beginner SASS / SCSS
Beginner JavaScript

5 thoughts on “How To Create Login Form In HTML and CSS Make Sign In Form Design”

Leave a Reply Cancel reply

Tutorial Description :

Img:

Useful links:

Font AwesomeGoogle Fonts

HTML :

CSS:

Part 2 Show | Hide Form using Java Script

Tutorial Description :

HTML:

CSS:

JS:

My Udemy Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

Part 3 Social Media Buttons and Animated Input tags and Labels

Tutorial Description :

Useful links:

Font AwesomeGoogle Fonts

index HTML :

home HTML :

CSS:

Part 4 Generate random Password | random code using Java Script 1/2

Tutorial Description :

Useful links:

Font AwesomeGoogle Fonts

Reset Password HTML :

CSS:

Part 4 Generate random Password | random code using Java Script 2/2

Tutorial Description :

JS:

Part 5 Local Storage using Java Script

Tutorial Description :

HTML:

CSS:

JS:

My Udemy Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

Sharing means caring:

Like this:

5 thoughts on “How To Create Login Form In HTML and CSS Make Sign In Form Design”

Leave a Reply Cancel reply

Font Awesome
Google Fonts

Font Awesome
Google Fonts

Font Awesome
Google Fonts