Skip to main content
100%

Password Visibility

✓ Published0🌍 Public
Aangusgrant
Last edited Oct 10, 2022
Created on Oct 10, 2022

This example demonstrates a login form with a “Show password” checkbox that toggles the visibility of the password field. When checked, the password input’s type attribute changes from “password” to “text,” revealing the typed characters; unchecking restores the masked state. The interaction uses vanilla JavaScript and the `addEventListener` method on the checkbox’s `change` event, with `setAttribute` to update the input type. The page is plain HTML and CSS, with no external libraries or data sources.

AI-generated description

Similar vizzes

Loading thumbnail…

Password Visibility - Multiple Fields

This example demonstrates a password change form with two separate password fields and a single "Show passwords" checkbox. The interface shows the current and new password inputs, with the checkbox toggling both fields between masked and visible text. The code uses plain JavaScript with the `querySelector` and `querySelectorAll` methods to access the checkbox and all password inputs, then listens for a `click` event to loop through each input and change its `type` attribute between `password` and `text`. No external libraries are used; the interaction relies entirely on native DOM manipulation and event handling.

Aangusgrant
89% match
Loading thumbnail…

Password Visibility - Multiple Forms

This example demonstrates a password visibility toggle across two separate forms: one for changing a username and another for changing a password. Each form contains a checkbox that, when checked, reveals its associated password fields as plain text. The page uses a single delegated click event listener on the document, which checks whether the clicked element matches either checkbox ID via `event.target.matches()`. It then traverses the DOM with `closest()` and `querySelectorAll()` to target only the password inputs within that form, switching their `type` attribute between `"password"` and `"text"` based on the checkbox state. The code uses vanilla JavaScript and standard HTML form elements, with no external libraries.

Aangusgrant
86% match
Loading thumbnail…

React Starter

This example demonstrates a simple password visibility toggle in a React form. It shows how a checkbox toggles an input field between “password” and “text” types using the `useState` hook and the component-level `showPwd` state. The React 16.13.1 UMD builds are loaded from unpkg, with the app rendered via `ReactDOM.render` into a root div, and the toggle logic handled by the checkbox’s `onClick` event calling `setShowPwd`.

Vvvs1680
72% match
Loading thumbnail…

Login & Registration Form

This example presents an interactive login and registration form built with HTML and CSS, featuring a toggle between two views. The interface uses a hidden checkbox (`#check`) to switch between the login and signup forms, with CSS transitions on the submit buttons for hover feedback. The design is styled with the Poppins font from Google Fonts, and the form inputs are purely presentational, with no backend or validation logic. The implementation relies on vanilla JavaScript only for the checkbox interaction, while the visual styling and layout are handled entirely through the included stylesheet.

SSriyaI
64% match
Loading thumbnail…

Form Login

This example shows a basic login form with email, password, and submit fields on a muted gray background. The form is styled with CSS, including a light purple background, rounded corners, and a border, while the heading and inputs are centered. The page is built with plain HTML and CSS only, using no JavaScript or external libraries. The form does not include any submission handling or validation, making it a static visual demonstration of form layout and styling.

VVictor Gonzalez
59% match
Loading thumbnail…

Login-Box

This interactive login form demonstrates a form-validation and animation sequence. It presents a centered login box where users enter a username and password; blank fields receive a red error box-shadow. Upon successful submission, the dark background layer slides in, the form animates off-screen to the right, and a personalized greeting in the "Rock Salt" font fades in from the top. The implementation uses jQuery `.animate()` for the CSS-based motion, while the D3.js library (v5) is loaded but not directly used; the page structure and styling rely on HTML, CSS, and JavaScript.

AAndrew-Kiwa
55% match
Loading thumbnail…

Gist 00cc7ca5f0a10ae2f0029e0e39ad3b62

This example shows an interactive password generator that creates ten candidate passwords in real time as the user types a desired length, with the selected password either copied to the clipboard or inserted into the current text field. The code uses the `generate-password` library’s `generateMultiple` function, the `rc` configuration loader for defaults, and Script Kit’s `arg` prompt for dynamic list filtering, along with the `copy` and `setSelectedText` APIs to handle output. The rendering approach is a plain terminal-style list driven by user input, with no visual charting or graphical data display involved.

Aabernier
55% match
Loading thumbnail…

form with strip background and css animation bubbles

A form with floating labels sits on a striped background made via repeated CSS `linear-gradient` layers. Eight geometric shapes (circles, triangles, squares) float upward from the bottom in CSS keyframe animations (`shapes1`, `shapes2`, `shapes3`) with varied delays, durations, and colors, some using `border-radius` and border triangles. JavaScript event listeners on `focusin`/`focusout` toggle an `.active` class to animate labels. Password validation shows requirements when invalid, using `:invalid` and `:placeholder-shown` selectors. No external libraries are used; all rendering relies on native CSS and JavaScript.

KKacieW
55% match