Из данного видео Вы узнаете о том, как правильно сверстать форму для авторизации пользователя, валидную по всем параметрам, а также анимировать ТОЛЬКО ПРИ ПОМОЩИ CSS label во время фокуса. Кроме того, я предоставлю JS (native), который позволяет смотреть пароль
DEMO
HTML:
<!doctype html>
<html lang=ru>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel=stylesheet href=/sys/css/css.css>
</head>
<body>
<main>
<section>
<div class="fx ac jc fdc my-1 form">
<div class="tc div-login">
<span class="fx ac jc cp" onclick="location.href='/'">
<img src=/img/logo.svg alt width=100 class=my-1>
</span>
<p>Добро пожаловать</p>
<h3 class="fx ac jc my-1 mb-2">
<svg viewBox="0 0 512 512" width=30 class=mr-.3><use xlink:href="/img/icons.svg#login"></use></svg>
Вход в личный кабинет
</h3>
<form action=# class=my-1>
<div class=pr>
<input required name=login minlength=7 maxlength=60 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" type=email id=a1>
<label for=a1><svg viewBox="0 0 428 428" width=20><use xlink:href="/img/icons.svg#user"></use></svg> Введите Ваш адрес электронной почты *</label>
</div>
<div class="pr fx">
<div class="fx afs mw1">
<input required type=password autocomplete=off minlength=5 maxlength=30 id=a2>
<label for=a2><svg viewBox="0 0 512 512" width=20><use xlink:href="/img/icons.svg#password"></use></svg> Введите Ваш пароль *</label>
<button class="pr fx jc ac btn-dark showPassword" title="Показать пароль"><svg viewBox="0 0 456 456" width=26 class=fillfff><use xlink:href="/img/icons.svg#eye"></use></svg></button>
</div>
</div>
<small class=db>поля, отмеченные звёздочкой, необходимо заполнить</small>
<button class="my-1 db mw1 btn-primary login" type=submit>Войти</button>
</form>
</div>
<div class="db my-1 tc copy"><a href="/">Главная</a> <div class=in>©</div> 2022</div>
</div>
</section>
</main>
</body>
</html>
JS:
<script>
const
d=document,
s=e=>d.querySelector(e),
login=s(".login"),
password=s("#a2"),
showPassword=s(".showPassword");
if(showPassword){
showPassword.addEventListener("click",_=>{
_.preventDefault();
password.type=(password.type=="password")?"text":"password";
showPassword.classList.toggle("bSPCl")
return
})
}
if(login){
login.addEventListener("click",_=>{
_.preventDefault();
window.location.href='ok.html'
return
})
}
</script>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* Просто для страницы и формы)*/
body,body input,body textarea,body button{font-family:'Roboto', sans-serif}
a{color:#007bff}
.pr{position:relative}
.db{display:block}
.in{display:inline-block}
.fx{display:flex}
.ac{align-items:center}
.afs{align-items:flex-start}
.jc{justify-content:center}
.jsb{justify-content:space-between}
.jsa{justify-content:space-around}
.fdc{flex-direction:column}
.my-1{margin:1rem 0}
.mr-\.3{margin-right:.3rem}
.mb-2{margin-bottom:2rem}
.tc{text-align:center}
.mw1{min-width:100%}
.cp{cursor:pointer}
body{margin:0;padding:0}
.form{min-height:100vh;max-width:666px;margin:auto}
input{display:block;width:100%;box-sizing:border-box;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.div-login{padding:1rem;border-radius:1rem;box-shadow:0 .5rem .6rem 0 #ccc,0 0 0 1px #f1f1f1}
button{user-select:none;color:#fff;border:0;text-align:center;white-space:nowrap;vertical-align:middle;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:6px}
.btn-dark{background-color:#333}
.btn-primary{border:1px solid#007bff;background-color:#007bff}
.copy div{transform:rotateY(180deg)}
.fillfff *{fill:#fff}
.bSPCl:after{content:"";position:absolute;width:3rem;height:.2rem;background-color:#fff;transform:rotate(-45deg);animation:a1z linear .3s}
@keyframes a1z{50%{transform:rotate(-45deg)rotateY(90deg)}}
/* \ Просто для страницы и формы)*/
/*ВАЖНО*/
label{position:absolute;top:.5rem;left:.5rem;transition:top linear .15s,left linear .15s,font-size .35s}
input{margin:0 0 2rem 0;transition:box-shadow linear .15s}
input:not(:valid){color:transparent!important}/*if no valid data, we set transparent color*/
input:focus{color:#000!important;box-shadow:0 0 0 .2rem #cae5a4}/*if no valid data, we set transparent color*/
input:focus:not(:valid){box-shadow:0 0 0 .2rem red}/*if no valid data, we set transparent color*/
input:valid~label,/*if valid value (~not empty)*/
input:focus~label,/*if focus*/
input:-internal-autofill-selected~label{top:-1.3rem;left:0;font-size:.8rem}/*if autofill data to value*/
input:valid~label svg,/*if valid value (~not empty)*/
input:focus~label svg,/*if focus*/
input:-internal-autofill-selected~label svg{width:13px}/*if autofill data to value*/
/* \ ВАЖНО*/
Команды для node js.
Установить http-server:
npm i http-server
Инициализировать проект:
npm init -y
Запустить сервер:
npx http-server