HTML Login Page Code with Validation

This HTML code snippet helps you create a login page with username and password validation. It also toggles the password visibility (show/hide password) with an eye icon. You can integrate this login form into your web/app project where users need authentication before accessing the content.

How to Create HTML Login Page Code with Validation

1. Start by creating a <div> with the class "login-page" to contain the login form. Inside it, create another <div> with the class "form" to hold the form elements. Add a <form> tag with the class "login-form" and specify the action attribute for form submission.

Include <input> fields for username and password, with placeholders and IDs for identification. Insert an <img> tag for the password visibility toggle, and a <span> for displaying validation messages.

Finally, add a <button> for the login action and a link for password recovery.

<div class="login-page">
        <div class="form">
            <form class="login-form " action="https://www.instagram.com/developer_nikhil27/" target="_blank">
                <h2>SIGN IN TO YOUR ACCOUNT</h2>
                <input type="text" required placeholder="Username" id="user" autocomplete="off" />
                <input oninput="return formvalid()" type="password" required placeholder="Password" id="pass" autocomplete="off" />
                <img src="https://cdn2.iconfinder.com/data/icons/basic-ui-interface-v-2/32/hide-512.png"
                    onclick="show()" id="showimg">
                <span id="vaild-pass"></span>
                <button type="submit">SIGN IN</button>
                <p class="message"><a href="#">Forgot your password?</a></p>
            </form>
        </div>
    </div>

2. Style the login form using CSS to make it visually appealing and user-friendly. Define styles for input fields, buttons, and other elements. You can customize the design according to your preferences by adjusting colors, fonts, and layout.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;1,100;1,200;1,300&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
  font-family: "Poppins", sans-serif;

}
body{
    background: #6a62d2;
}

.login-page {
    height: 100vh;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
}

.form {
  position: relative;
  filter:drop-shadow(0 0 2px #000000);
  border-radius: 5px;
  width: 360px;
  height: 420px;
  background-color: #ffffff;
  padding:40px;
}

.form img {
    position: absolute;
    height: 20px;
    top: 230px;
    right: 60px;
    cursor: pointer;
}

.form input {
    outline: 0;
    background: #f2f2f2;
    border-radius: 4px;
    width: 100%;
    border: 0;
    margin: 15px 0;
    padding: 15px;
    font-size: 14px;
}

.form input:focus {
    box-shadow: 0 0 5px 0 rgba(106, 98, 210);
}

span {
    color: red;
    margin: 10px 0;
    font-size: 14px;
}

.form button {
    outline: 0;
    background: #6a62d2;
    width: 100%;
    border: 0;
    margin-top: 10px;
    border-radius: 3px;
    padding: 15px;
    color: #FFFFFF;
    font-size: 15px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}

.form button:hover,
.form button:active,
.form button:focus {
    background: black;
    color: #fff;

}

.message{
    margin: 15px 0;
    text-align: center;

}
.form .message a {
    font-size: 14px;
    color: #6a62d2;
    text-decoration: none;
}

3. Write JavaScript functions to implement password validation. Create a function called formvalid() to check if the password meets certain criteria, such as minimum and maximum length. Display an error message if the password doesn’t meet the requirements.

Implement a password visibility toggle functionality using JavaScript. Create a function called show() to toggle the password visibility when the user clicks on an eye icon. This feature allows users to view their password while typing and hide it when needed.

//TODO : Its a Completed Code
function formvalid() {
  var vaildpass = document.getElementById("pass").value;

  if (vaildpass.length <= 8 || vaildpass.length >= 20) {
    document.getElementById("vaild-pass").innerHTML = "Minimum 8 characters";
    return false;
  } else {
    document.getElementById("vaild-pass").innerHTML = "";
  }
}

function show() {
  var x = document.getElementById("pass");
  if (x.type === "password") {
    x.type = "text";
    document.getElementById("showimg").src =
      "https://static.thenounproject.com/png/777494-200.png";
  } else {
    x.type = "password";
    document.getElementById("showimg").src =
      "https://cdn2.iconfinder.com/data/icons/basic-ui-interface-v-2/32/hide-512.png";
  }
}

That’s all! hopefully, you have successfully integrated this HTML, CSS & JavaScript code into your project to create a login page with validation on your website. If you have any questions or suggestions, feel free to comment below.