Home • WEB мастеру • Статьи • Форма ввода пароля с Bootstrap с глазом. Как у Google

Форма ввода пароля с Bootstrap с глазом. Как у Google Делай с умом, делай2 красиво...

📝 Пост № 216 от 9 сентября 2025 | В категории WEB мастеру, Статьи | Комментариев нет

eye-form Вы наверняка регистрируетесь или вводите свой логин в форме Google на сайтах. И, соответственно, видели эту форму с «глазом». А не хотели бы реализовать такое «чудо-юдо» у себя на сайте или блоге WordPress? Сегодня у вас есть такая возможность, тем более, что реализовать современное, безопасное и удобное поле для ввода пароля с функцией показа/скрытия символов, как у Google — не такая уж и трудная задача.

Структура (HTML) использует фреймворк Bootstrap для быстрой верстки. Создается базовый `input` типа «password» и добавляется иконка «глаза» (обычно из Bootstrap Icons) через элемент `span`. Все предельно просто, т.к. Bootstrap предоставляет готовые стили для поля ввода и иконки…

Вам только останется «прикрутить» к своему сайту эту форму, взяв за основу нижеприведенный код. Иконка позиционируется внутри поля, создавая единый, эстетичный элемент формы. А обработчиком формы выступает простой JavaScript.

1 На иконку «глаза» вешается обработчик события `click`.
2 При клике скрипт проверяет текущий тип поля (`password` или `text`).
3 В зависимости от типа, он динамически меняет его на противоположный, обеспечивая показ или скрытие символов.
4 Одновременно меняется и сама иконка (на перечёркнутый глаз или открытый), чтобы визуально дать обратную связь пользователю.

В итоге получается профессиональное, узнаваемое и удобное поле, повышающее юзабилити ваших форм авторизации и регистрации. Берите готовое решение и внедряйте у себя на сайте!

Удачи и до новых встреч!
С уважением, MasterPRO