CSS анимация input:focus~label формы подробное объяснение форма логина + -internal-autofill-selected

Подробности: Создано: 09 октября 2021; Обновлено: 09 октября 2021

Из данного видео Вы узнаете о том, как правильно сверстать форму для авторизации пользователя, валидную по всем параметрам, а также анимировать ТОЛЬКО ПРИ ПОМОЩИ 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>&copy;</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

CSS анимация input:focus~label формы подробное объяснение форма логина + -internal-autofill-selected

DEMO

Еще скрипты