Make A Simple Password Toggle Form With JavaScript

Make A Simple Password Toggle Form With JavaScript

In front-end development, there are times when you are creating a login or a sign-up form and you want to give the user the option to show their password.

In front-end development, there are times when you are creating a login or a sign-up form and you want to give the user the option to show their password so that they can make sure that they typed everything correctly, rather than hiding it behind dots or asterisks. With Vanilla JavaScript, this is a remarkably simple design element to implement, and it can help add to the overall experience that your UI conveys.

Let’s take a look at how we would implement a password visibility toggler without the use of any libraries, using plain Vanilla JavaScript and HTML/CSS.

First, Let’s Handle the HTML & CSS

Before we can get to the fun part of this project — the JavaScript — we must first create our HTML document and add the elements that we need to it. This is pretty straight forward, provided you know HTML and CSS. You can go ahead and create your own login form and style it how you desire, or — if you prefer to copy my login form — you can download it from my GitHub account.

After you have your HTML in place, your form should look something like this:

Image for post

Unstyled, ugly Login Form

Once the HTML is done, we can go ahead and create a style.css file and link our HTML document to it, and then we can style our form. Here is what the CSS for my login form looks like (get it from GitHub here):

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: hsl(207, 100%, 40%);
    color: #666;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container {
    width: 100%;
    max-width: 400px;
    min-height: 30vh;
    padding: 1rem 2rem;
    background-color: #FFF;
    border-radius: .3rem;
}
h2, p { text-align: center; }
h2 { font-size: 2.5rem; }
a {
    color: hsl(207, 100%, 50%);
    text-decoration: none;
}
a:hover { color: hsl(207, 100%, 30%); }
.form-control {
    width: 100%;
    margin: 1rem 0;
    position: relative;
}
.form-control > label { display: block; }
.form-control > input {
    display: block;
    width: 100%;
    margin: .5rem 0;
    padding: .5rem .3rem;
    background-color: #EFEFEF;
    border: 2px solid transparent;
    outline: none;
    font-family: inherit;
    font-size: inherit;
}
.form-control > input:focus { border-color: #999; }
.form-control > input[type="submit"] {
    border: 2px solid transparent;
    background-color: hsl(207, 100%, 35%);
    color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: .1rem;
    cursor: pointer;
}
.form-control > input[type="submit"]:hover,
.form-control > input[type="submit"]:focus {
    background-color: hsl(207, 100%, 40%);
}
.form-control > input[type="submit"]:focus {
    border-color: #999;
}

javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

What is JavaScript - Stackfindover - Blog

What is PHP: - Who invented PHP, how it works, answers to all such questions about PHP, and much other information, you are going to

JavaScript Shopping Cart - Javascript Project for Beginners

JavaScript Shopping Cart - javascript shopping cart tutorial for beginnersBuy me a coffee 🍺 https://www.paypal.com/paypalme/ziddahSource Code: https://bit....

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

JavaScript compound assignment operators

We use assignment operator in JavaScript to store values in a variable. Read more...