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

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

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

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

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

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

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

Оценок: (1 среднее: 5,00 из 5)

Загрузка...

Просмотров страницы: 6 Метки: CSS ○ html ○ php ○ Web мастеру ○ Новости блога ○ Последнее обновление статьи: 06.09.2025 Короткая ссылка: https://master-sv.com/blog/?p=13060