Password Visibility

100%

Password Visibility - Multiple Fields

✓ Published0🌍 Public

Last edited Oct 12, 2022

Created on Oct 12, 2022

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.

AI-generated description

Similar vizzes

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

91% match

Loading thumbnail…

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.

Aangusgrant

89% 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

67% 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

58% 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

57% 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

56% match

Loading thumbnail…

Gist c30a75b7c7100133e2f1f098c8b53a4c

This example demonstrates a password generation tool that interactively suggests strong passwords based on user input. The tool displays a live list of ten password options, updating as the user types a desired length, and allows selection for copying or insertion into the active text field. It uses the `generate-password` library’s `generateMultiple` function with options configured via the `rc` package, and integrates with John Lindquist’s Kit framework for argument parsing and clipboard operations. The user interface is built with Kit’s `arg` function, supporting a custom flag for copying the chosen password.

Aabernier

55% 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

51% match