Login with Password Toggle

Enhance user experience on your login forms with a password visibility toggle. Learn how to implement a toggle button that allows users to easily toggle between password visibility and hidden mode.

Preview
Code

<div class="login-card">
  <h2>Login</h2>
  <h3>Enter your credentials</h3>
  <form class="login-form">
    <input
      spellcheck="false"
      class="control"
      type="text"
      placeholder="Username"
    />
    <div class="password">
      <input
        spellcheck="false"
        class="control"
        id="password"
        type="password"
        placeholder="Password"
      />
      <button
        class="toggle"
        type="button"
        onclick="togglePassword(this)"
      ></button>
    </div>
    <button class="control" type="button">LOGIN</button>
  </form>
</div>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

@keyframes rotate {
  100% {
    background-position: 0% 50%;
  }
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-logins/26ff435f6d5a46735833a810d8f82be57a0f7d31/login-1/background.svg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Inter Var";
  color: #3a334e;
  animation: rotate 1s infinite alternate linear;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
}

.control {
  border: 0;
  border-radius: 8px;
  outline: none;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: #edeaf7;
  color: #5a4f79;
  font-family: inherit;
  font-size: 16px;
  transition: 0.4s;
}

.login-card {
  width: 400px;
  padding: 100px 30px 64px;
  border-radius: 1.25rem;
  background: #ffffff;
  text-align: center;
}

.login-card > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 6px;
}

.login-card > h3 {
  color: #837f90;
  margin: 0 0 40px;
  font-weight: 500;
  font-size: 1rem;
}

.login-form {
  width: 100%;
  margin: 0;
  display: grid;
  gap: 16px;
}

.login-form input.control::placeholder {
  color: #aaa7bc;
}

.login-form > button.control {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: #703eff;
  color: #f9f9f9;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.375s;
}

.password {
  position: relative;
}

.toggle {
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  width: 30px;
  height: 30px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-logins/26ff435f6d5a46735833a810d8f82be57a0f7d31/login-1/show.svg");
  background-size: 85%;
  background-position: center;
  background-repeat: no-repeat;
}

.toggle.showing {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-logins/26ff435f6d5a46735833a810d8f82be57a0f7d31/login-1/hide.svg");
}

const togglePassword = (button) => {
  button.classList.toggle("showing");
  const input = document.getElementById("password");
  input.type = input.type === "password" ? "text" : "password";
};

Enhance the user login experience on your website with a password toggle feature. This guide will walk you through creating a login form using HTML, CSS, and JavaScript, including a toggle switch to show or hide the password. Follow these instructions to copy the provided code snippet, link the required CSS and JavaScript files, and personalize the form to match your website's design and functionality.

Step 1: Copy the Code Snippet

Start by copying the provided HTML, CSS, and JavaScript code snippet below. This snippet includes the foundational structure, styles, and scripting for the login form with a password toggle. Select the code, copy it, and paste it into your respective HTML, CSS, and JavaScript files.

Step 2: Link CSS and JavaScript Files

Ensure the CSS file and JavaScript file are correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles and the <script> tag at the end of the <body> section to import the JavaScript functionality:
```
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
```

Step 3: Customize and Make it Yours

Personalize the login form with a password toggle to match your website's branding and functionality. Adjust the CSS styles to modify the form's appearance, colors, and interactions. You can also enhance the JavaScript functionality to include additional features like form validation or animations to improve user experience.

By following these steps, you can implement and customize a login form with a password toggle on your website using HTML, CSS, and JavaScript. Tailor the form to your specific needs and provide a user-friendly login experience with this modern and functional component.

Code Explanation

HTML Code

Container (`<div class="login-card">`):

Contains the entire login card content.

Headings (`<h2>` and `<h3>`):

<h2>Login</h2>: Displays the heading "Login".
<h3>Enter your credentials</h3>: Subheading indicating users should enter their credentials.

Form (`<form class="login-form">`):

Contains inputs for username, password, and a login button.

Username Input (`<input type="text">`):

<input spellcheck="false" class="control" type="text" placeholder="Username" />
Allows users to input their username. spellcheck="false" disables spell checking for this input field.

Password Input (`<input type="password">`):

<input spellcheck="false" class="control" id="password" type="password" placeholder="Password" />
Allows users to input their password. spellcheck="false" disables spell checking for this input field.

Password Toggle Button (`<button type="button" onclick="togglePassword(this)" class="toggle"></button>`):

This button is used to toggle the visibility of the password. It typically toggles between showing and hiding the password characters.

Login Button (`<button type="button" class="control">`LOGIN`</button>`):

This button submits the login form. The type="button" attribute indicates it's a button that triggers JavaScript behavior (likely to validate and submit the form).

CSS Code

Global Styles

* { box-sizing: border-box; }: Ensures all elements include padding and border in their total width and height.

Body and Animation

html, body, .wrapper { height: 100%; }: Sets the height of the HTML, body, and .wrapper elements to 100% of the viewport height.
@keyframes rotate: Defines a keyframe animation named rotate.
100% { background-position: 0% 50%; }: Specifies that at 100% of the animation's duration, the background image should be positioned at 0% horizontal and 50% vertical.

Body Styling

body: Styles the <body> element.

display: grid; place-items: center;: Centers all content vertically and horizontally.
margin: 0;: Removes default margins.
background-image: url(...);: Sets a background image from an external URL, repeating it to cover the entire background.
font-family: "Inter Var";: Specifies the font family for text content.
color: #3a334e;: Sets the text color.

Button Styling

button: Styles all <button> elements.

background: transparent; border: 0;: Removes default button styles (transparent background and no border).
cursor: pointer;: Changes the cursor to a pointer on hover.

Form Control Styling

.control: Styles form input elements and buttons with class .control.
border: 0; border-radius: 8px; outline: none;: Removes borders, adds border-radius, and removes outline (focus border).
width: 100%; height: 56px; padding: 0 16px;: Sets dimensions and padding.
background: #edeaf7; color: #5a4f79;: Background color and text color.
font-family: inherit; font-size: 16px;: Inherits font family and sets font size.
transition: 0.4s;: Adds a smooth transition effect.

Login Card Styling

.login-card: Styles the container for the login form.

width: 400px; padding: 100px 30px 64px;: Sets width and padding values.
border-radius: 1.25rem;: Applies rounded corners.
background: #ffffff;: Sets a white background.
text-align: center;: Centers text content horizontally.

Heading Styles

.login-card > h2: Styles the heading inside .login-card.

font-size: 36px; font-weight: 600; margin: 0 0 6px;: Sets font size, weight, and margin.

Form Styles

.login-form: Styles the login form container.

width: 100%; margin: 0; display: grid; gap: 16px;: Sets full width, removes margins, and uses grid layout with gap between elements.

Placeholder Text Styling

.login-form input.control::placeholder: Styles placeholder text inside form inputs.

color: #aaa7bc;: Sets placeholder text color.

Login Button Styling

.login-form > button.control: Styles the login button inside the form.

cursor: pointer; width: 100%; height: 56px; padding: 0 16px;: Defines dimensions and padding.
background: #703eff; color: #f9f9f9;: Sets background and text colors.
border: 0; font-family: inherit; font-size: 1rem; font-weight: 600; text-align: center; letter-spacing: 2px;: Further styles related to typography and appearance.
transition: all 0.375s;: Adds a smooth transition effect.

Password Toggle Button Styling

.toggle: Styles the button used to toggle password visibility.

position: absolute; top: 50%; right: 16px; translate: 0 -50%;: Positions the button absolutely and vertically centers it.
width: 30px; height: 30px; background-image: url(...); background-size: 85%; background-position: center; background-repeat: no-repeat;: Defines dimensions and background image properties.
.toggle.showing: Modifies the button appearance when it is in the "showing" state.
background-image: url(...);: Changes the background image to a different icon when the password is shown.

JavaScript Code

Function Definition:

const togglePassword = (button) => {

togglePassword is a function that takes one parameter button. This parameter represents the button element that triggers the password visibility toggle.

Toggle Class:

button.classList.toggle("showing");

button.classList.toggle("showing"); toggles the presence of the CSS class showing on the button element. This class is presumably used to change the appearance of the button when the password visibility state changes.

Get Input Element:

const input = document.getElementById("password");

const input = document.getElementById("password"); retrieves the password input element from the document using its id attribute, which is assumed to be "password".

Toggle Password Visibility:

input.type = input.type === "password" ? "text" : "password";

This line toggles the type attribute of the input element between "password" and "text".
If input.type is "password", it changes it to "text", making the password visible.
If input.type is already "text", it changes it back to "password", making the password hidden (masked).