Кнопка показать пароль в логин форме используя HTML, CSS & JS шаг за шагом || Using HTML, CSS & JS

Всем привет в этом видео я покажу как сделать логин форму в которой будет поле для ввода имени username поле для ввода пароля введите ваш пароль и также кнопка login с hover эффектом и у подписчика возник вопрос как добавить кнопку показать пароль я добавил эту возможность с помощью javascript когда мы вводим наш пароль мы вводим символы пароля здесь

С правой стороны есть глазик, нажимая на который мы видим символы отображаются именно в том формате, который мы вводили.

Когда мы нажимаем на глазик еще раз, то символы превращаются в звездочки и наш пароль скрывается.

Все это мы будем делать с помощью HTML, CSS и JavaScript.

Итак, приступим к созданию нашей логин формы.

У нас есть файл index.html, style.css, стили подключены.

Также у нас есть папка img, в которой размещены все наши необходимые рисунки.

И приступим к созданию.

В html создаем deal с классом container.

И давайте добавим background на нашу страницу.

Обратимся к универсальному селектору.

Однулим мерджины.

паддинги и укажем box-sizing border-box обратимся в контейнер и зададим для него ширина на 100% высота 100vh и добавим background-image укажем linear-radiant сделаем его наполовину затемненным нам нужно указать hdba и указать следующее

значение скопируем его и вставим еще раз и после второй скобки дужки мы открываем ставим запятую вставим url добавляем url и указываем img и выбираем наш background c также добавим background position у нас будет центр и background

size у нас будет color теперь давайте откроем браузер и посмотрим как добавился наш задний фон задний фон есть все хорошо давайте свернем браузер в половину свернем visual studio code и приступим к созданию нашей уже формы добавим div с классом логин и давайте добавим

этот элемент на страницу застилизуем его и уже внутрь него будем помещать нашу форму и дальнейшие элементы обращаемся к классу логин и задаем следующее значение ширина будет 300 пикселей высота 350 пикселей бэкграунд у нас будет черного цвета color белый

и также укажем спозиционируем наш он вот он появился на странице нам нужно его спозиционировать по центру для этого нам нужно указать position absolute top на 50% left на 50% и transform translate минус 50% минус 50% также добавим border radius на 10 пикселей для скругления

углов так есть этот элемент готов теперь внутрь в html внутрь этого diva логин мы добавляем amg и указываем amg слэш выбираем юзер у нас мы видим добавилась наша иконка давайте зададим ей класс также будет юзер и теперь нам нужно спозиционировать наш элемент юзер

вот в эту зону.

Давайте это сделаем.

Обратимся к классу User и зададим следующее значение.

Ширина 100 пикселей, высота 100 пикселей.

Background будет белый.

Border радиус на 50%, чтобы он стал круглым.

И укажем

position absolute и спозиционируем следующим образом top на минус 50 пикселей половину от заданной ширины и left укажем calc 50 процентов минус

50 пикселей и наш элемент разместился по центру так это есть это готово теперь давайте добавим после нашего рисунка нашего user png рисунка вот этого

Добавим еще заголовок первого типа и укажем туда логин.

Здесь он есть, добавился.

И также добавим форму.

И создаем, добавляем лейбл, укажем юзернейм и внутрь пропишем юзернейм.

после label создаем input с типом text и дальше добавляем id username для того чтобы подключить нашу подпись добавить ее к нашему текстовому полю также нам нужно еще

Добавить нашу подсказку.

Playholder.

Enter.

Your name.

Это есть.

Это добавилось.

Еще добавим Label.

И пропишем внутрь него форм.

Path.

И это будет у нас Password.

добавим input с типом password и зададим id для него form pass и добавим еще class form pass также добавляем нашу подсказку playholder

placeholder enter your password и также после этого элемента нам нужно добавить импат еще с типом submit и добавим value для него login

так это есть теперь давайте будем стилизовать нашу форму чтобы она размещалась по центру для этого нам нужно в логин добавить padding на 80 пикселей сверху и снизу и 30 пикселей справа и слева так это есть теперь нам нужно

обратиться к h1 в подписи логин указать text align center padding зададим немного 20 пикселей и font-size сделаем на 30 пикселей это готово теперь

обратимся к label и укажем font-weight bold чтобы подписи username и password стали более жирным начертанием теперь обратимся к классу login input и задаем ширина 100% и

margin bottom у нас будет 20 пикселей это есть теперь обращаемся к классу логин и указываем input type type text ставим запятую и input

type password теперь давайте застилизуем эти элементы укажем border none outline none background у нас будет transparent также добавим border

батом на 1 пиксель solid и белый цвет у нас будет добавим color белый и зададим ширину на 30 пикселей выглядит уже более менее

еще добавим font-size на 15 пикселей.

Это готово.

Теперь давайте застилизуем нашу кнопку Login.

Обратимся к классу Login, Input и Type.

У нас будет Submit.

теперь также указываем border border-none outline-none высоту сделаем 40px также добавим border-radius на 25px добавим

теперь добавим border на 2 пикселя solid и цвет у нас будет aqua также добавим color белый и font-size 20 пикселей

наша форма добавилась.

Теперь давайте еще сделаем power эффект для нашей кнопки.

Скопируем отсюда этот элемент и добавим power и укажем

курсор pointer background color будет у нас aquamarine и color черный при наведении когда мы наводим у нас меняется текст на черный и background меняется на aquamarine такую вот форму у нас

получилось сделать давайте еще для более плавного наведения кнопку добавим еще сюда transition на 0.5 секунд и чтобы был более плавный эффект теперь давайте будем создавать наш элемент глазик чтобы он отображал

наш пароль для этого мы будем использовать JavaScript давайте добавим наш глазик нам нужно после после input с паролем добавить span с классом

Path Icon и также добавить ID также Path Icon и внутрь Span мы добавляем IMG и в источник указываем IMG и выбираем наш глазик

это выбрали теперь давайте его спозиционируем вот он у нас добавился давайте теперь его будем позиционировать чтобы он стал меньше и был на этом уровне нам нужно еще в img добавить style и уменьшить его сделаем ему

ширину виз на 20 пикселей и высоту также 20 пикселей чтобы она стала поменьше вот он есть добавился теперь нам нужно его спозиционировать в эту зону и мы обращаемся к классу PathIcon

вот к этому классу и указываем position absolute справа на 35 пикселей и сверху на 65% и выберем еще курсор point чтобы при наведении у нас курсор менялся на указательный теперь нам нужно

в конце после div добавить скрипт и добавить следующий скрипт для того чтобы у нас наш пароль при нажатии на глазик отображался давайте это сделаем выберем константу и зададим

input path название document by id и внутрь пропишем form path это у нас id

вот здесь id нашего пароля нашего тега input с типом пароль у него есть id formpass сюда мы его добавляем также скопируем этот элемент добавим еще раз но здесь уже поменяем на iconpass и здесь у нас будет

pass icon то что мы задавали в наш span они должны соотноситься то есть мы будем работать получается с этим элементом с паролем конкретно и нам нужно их синхронизировать между собой теперь мы обращаемся к icon pass и указываем add

EventListener.

Получается наша задача какая?

Нам нужно, чтобы когда мы вводим пароль, нажимаем на глазик, чтобы эти символы меняли свой тип на текстовый.

То есть сейчас у нас стоит тип пароль, а когда мы нажимаем, то у нас меняется на текст.

И давайте сейчас это вот как раз и сделаем.

Указываем iconPathAtEventListener

и у нас будет click что означает что по клику будет идти запятую и указываем что если input path давайте

Добавим get attribute.

То есть если у нас будет тип пароль, то нам нужно поменять его на текст.

И если, например, будет тип текст, нажимая на него, то должен быть пароль.

Если не будет такого, то будет обратное.

И здесь мы добавляем get attribute и указываем type.

password что будет у нас пароль здесь добавляем еще input pass и set attribute мы устанавливаем то что тип

должен быть у нас текст.

Так, и получается, здесь мы указываем также, что в противном случае, если не будет текст, то при нажатии опять нам нужно установить set.

атрибут у нас будет type и password обратно здесь точка с запятой и здесь также теперь давайте посмотрим когда мы вводим сюда наши символы и нажимаем на глазик у нас отображается отображается то что мы вводили

Когда мы нажимаем на глазик, то у нас появляются опять звездочки и мы наш пароль не видим.

Таким вот образом у нас получилось добавить с помощью JavaScript кнопку, которая показывает и скрывает пароль.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.