{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fbqf4"},{"data":{"image":{"id":"6147ab4123e2ec51eefc2b77"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"clt9m"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"4aetm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поле ввода HTML — простой и удобный элемент. Оно содержит более 30 вариантов атрибутов и является одним из самых надежных и заслуживающих изучения HTML-тегов. Поскольку пользователи постоянно взаимодействуют с полями на странице, приходится прилагать множество усилий, чтобы сделать их максимально удобными. Однако по ходу дела могут возникнуть различные сложности.","type":"unstyled","key":"1kn5a"},{"data":{"image":{"id":"6147ab415da1294d8a4be010"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5b589"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Базовая разметка","type":"header-three","key":"5oqhi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помечать поля — отличная CSS-практика. В статье мы будем использовать вложенное поле внутри разметки метки, которое связывает метку и входной тег и устраняет необходимость указывать атрибут for для метки и id для ввода. К тому же это значительно упрощает стилизацию поля.","type":"unstyled","key":"a73g3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":1,"style":"BOLD"},{"length":21,"offset":31,"style":"BOLD"},{"length":11,"offset":68,"style":"BOLD"},{"length":5,"offset":102,"style":"BOLD"}],"text":"\n \n Enter Email\n","type":"unstyled","key":"c7a1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":151,"style":"ITALIC"}],"text":"Другой альтернативой может послужить тег div в качестве обертки для таких элементов, как позиционирование, чтобы у них был общий родитель. Тег fieldset также может быть полезен в некоторых случаях. Данный метод позволяет расположить метку и ввод рядом и рассматривать их как единое целое.","type":"unstyled","key":"54f39"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":36,"style":"BOLD"},{"length":17,"offset":77,"style":"BOLD"}],"text":"

\n \n Enter Email\n

","type":"unstyled","key":"61p0q"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":10,"offset":109}],"inlineStyleRanges":[],"text":"Еще более короткая и допустимая альтернатива — использовать тег label с полем ввода внутри, но с атрибутом aria-label для читателей экрана, а затем применить псевдоэлемент CSS after для создания заполнителя.","type":"unstyled","key":"fd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":28,"style":"BOLD"}],"text":"\n \n","type":"unstyled","key":"8k3kj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"},{"length":7,"offset":37,"style":"BOLD"},{"length":16,"offset":58,"style":"BOLD"},{"length":23,"offset":0,"style":"ITALIC"},{"length":22,"offset":24,"style":"ITALIC"},{"length":28,"offset":47,"style":"ITALIC"},{"length":1,"offset":76,"style":"ITALIC"}],"text":"// Создание заполнителя\n.custom-field::after {\n content: attr(aria-label);\n}","type":"unstyled","key":"6pb8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все три альтернативы подойдут для типа стиля, который будет использоваться в данной статье, поэтому выберите любой из них по своему предпочтению. Ниже показано, что все три параметра отображают одно и то же на странице. Результат отображен в браузере Chrome.","type":"unstyled","key":"5svfp"},{"data":{"image":{"id":"6147ab418a833355e77d5a03"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9k7ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для чего мы ставим метку после ввода? Данный шаг дает возможность использовать такие состояния ввода, как focus и т. д. Таким образом мы сможем настроить метку и контролировать ее внешний вид и анимацию. В качестве альтернативы можно использовать Javascript, но это выходит за рамки данного руководства.","type":"unstyled","key":"34ppl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Начальная настройка","type":"header-three","key":"asjda"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":17,"offset":23}],"inlineStyleRanges":[],"text":"Если вы не используете CSS-нормализаторы, вам все же стоит добавить такие элементы CSS, как border-box и box-sizing — они важны для данного руководства. Если в конечном итоге готовое поле выглядит не так, как в статье, то, скорее всего, вам понадобится следующий фрагмент кода:","type":"unstyled","key":"ar4tm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"*, *::before, *::after {\n box-sizing: border-box;\n}","type":"unstyled","key":"40oro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Базовый стиль","type":"header-three","key":"a5iom"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Придадим данной области очень простой и минималистичный вид. Мы cможем улучшить его по ходу работы.","type":"unstyled","key":"514vf"},{"data":{"image":{"id":"6147ab41e8623024eb805679"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"60lqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для этого поля размер текста составит 14 пикселей. Элемент placeholder будет располагаться над полем ввода, поэтому необходимо установить относительное (relative) положение.","type":"unstyled","key":"ajf93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"},{"length":16,"offset":18,"style":"BOLD"},{"length":19,"offset":37,"style":"BOLD"}],"text":".custom-field {\n font-size: 14px;\n position: relative;\n}","type":"unstyled","key":"dgomm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стиль поля ввода в основном предназначен для его сброса, например для удаления внешнего вида и границ. Обратите внимание, что ширина поля ввода определяет размер элемента custom-field. Следующей важной деталью здесь является заполнение, которое нужно сопоставить при размещении элемента-заполнителя наверху.","type":"unstyled","key":"amd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":14,"style":"BOLD"},{"length":94,"offset":40,"style":"BOLD"},{"length":14,"offset":160,"style":"BOLD"},{"length":16,"offset":215,"style":"BOLD"}],"text":".custom-field input {\n border: none;\n -webkit-appearance: none;\n -ms-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: #f2f2f2;\n padding: 12px;\n border-radius: 3px;\n width: 250px;\n font-size: 14px;\n}","type":"unstyled","key":"cbrum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы расположили заполнитель слева от 12 пикселей, чтобы он соответствовал заполнению ввода. Мы также использовали преобразование для выравнивания по вертикали -50% с верхней частью — 22 пикселя. Такое количество пикселей необходимо для создания идеально центрированного преобразования. Верхняя часть 50% также работает, но из-за сообщения об ошибке мы используем пиксели.","type":"unstyled","key":"6h33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы текст заполнителя не был слишком длинным, ограничиваем его ширину максимальным 100%-значением минус 24 пикселя (сумма входных левых и правых отступов). Затем устанавливаем переполнение в виде многоточия.","type":"unstyled","key":"4h8gp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":14,"style":"BOLD"},{"length":33,"offset":31,"style":"BOLD"},{"length":26,"offset":128,"style":"BOLD"},{"length":67,"offset":173,"style":"BOLD"}],"text":".custom-field .placeholder {\n position: absolute;\n left: 12px;\n bottom: 50%;\n top: 22px; \n transform: translateY(-50%);\n width: calc(100% - 24px); \n color: #aaa;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}","type":"unstyled","key":"5ov3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете использовать переменную CSS, но, если вы измените заполнение ввода позже, это также повлияет на заполнитель.","type":"unstyled","key":"elku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":24,"style":"BOLD"}],"text":".custom-field {\n ...\n --field-padding: 12px;\n}","type":"unstyled","key":"fih7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":14,"style":"BOLD"},{"length":20,"offset":39,"style":"BOLD"}],"text":".custom-field input {\n ...\n padding: var(--field-padding);\n}","type":"unstyled","key":"4irmn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":14,"style":"BOLD"},{"length":20,"offset":43,"style":"BOLD"},{"length":24,"offset":87,"style":"BOLD"}],"text":".custom-field .placeholder {\n ...\n left: var(--field-padding);\n width: calc(100% - (var(--field-padding) * 2));\n}","type":"unstyled","key":"8h70e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эффект всплывающей метки","type":"header-three","key":"ekolu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если нажать на поле, заполнитель уменьшиться и переместится в верхний левый угол над полем.","type":"unstyled","key":"a6ab5"},{"data":{"image":{"id":"6147ab41b8bc0046d6d0800c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"iubr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы добавить этот переход, нужно обозначить пространство над полем, куда будет перемещаться заполнитель. Оно также пригодится, если перед полем появится другой элемент. 20 пикселей на верхней границе — отличный вариант: метка остается центрированной, а граница выступает внешней частью.","type":"unstyled","key":"1oo9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":24,"style":"BOLD"}],"text":".custom-field {\n ...\n border-top: 20px solid transparent;\n}","type":"unstyled","key":"8keqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее нужно узнать, когда ввод получает фокус, чтобы анимировать заполнитель. Воспользуемся сиблинг-комбинатором, чтобы выбрать заполнитель, а затем уменьшить шрифт, установить темный цвет и поднять его на 10 пикселей.","type":"unstyled","key":"9ipjk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":19,"style":"BOLD"},{"length":14,"offset":26,"style":"BOLD"},{"length":45,"offset":45,"style":"BOLD"}],"text":".custom-field input:focus + .placeholder {\n top: -10px;\n font-size: 10px;\n color: #222;\n}","type":"unstyled","key":"4opcc"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":6,"offset":187}],"inlineStyleRanges":[],"text":"При наличии значения заполнитель должен оставаться в таком положении, даже если фокус отсутствует. Достичь этой цели можно несколькими способами. Например, использовать псевдокласс ввода :valid вместе с атрибутом required. Однако стоит учитывать, что это работает только для обязательных полей.","type":"unstyled","key":"6c8mr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":20,"style":"BOLD"},{"length":62,"offset":32,"style":"ITALIC"},{"length":120,"offset":95,"style":"ITALIC"}],"text":"\n\n// Если обязательное поле допустимо, значит оно имеет значение // Если указано большое количество правил подтверждения, то это может привести к нарушению ввода: valid + .placeholder { ...\n}","type":"unstyled","key":"uoa2"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":16,"offset":180}],"inlineStyleRanges":[],"text":"Другой альтернативой является использование Javascript для определения класса, вне зависимости от наличия значения. Однако данное руководство предназначено только для CSS, поэтому laceholder-shown вместе с атрибутом заполнителя может послужить отличным решением.","type":"unstyled","key":"b90bf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":106,"offset":0,"style":"ITALIC"},{"length":36,"offset":151,"style":"ITALIC"},{"length":94,"offset":188,"style":"ITALIC"},{"length":20,"offset":127,"style":"BOLD"}],"text":"// Заполнитель НЕ должен быть пуст, // чтобы этот метод сработал, // а - просто пустое пространство \n\n// Если заполнитель не отображается, // значит, пользователь начал вводить значение ввода: not(:placeholder-shown) + .placeholder { ...\n}","type":"unstyled","key":"85o0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы получить хорошую анимацию, можно добавить переход наверх, размер шрифта и цвет в элемент-заполнитель.","type":"unstyled","key":"1j29i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":77,"offset":37,"style":"BOLD"},{"length":5,"offset":262,"style":"ITALIC"}],"text":".custom-field .placeholder {\n ...\n transition: \n top 0.3s ease,\n color 0.3s ease,\n font-size 0.3s ease; }\n\n.custom-field input:not(:placeholder-shown) + .placeholder\n.custom-field input:focus + .placeholder {\n top: -10px;\n font-size: 10px;\n color: #222; }","type":"unstyled","key":"frb0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Отображение сообщения об ошибке","type":"header-three","key":"6te2l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В зависимости от формы, вам может потребоваться отобразить сообщение об ошибке. Для тега метки можно включить другой элемент для ошибки.","type":"unstyled","key":"bi1b6"},{"data":{"image":{"id":"6147ab41b8bc0046d6d0800d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"usnn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":123,"style":"BOLD"}],"text":"\n \n Enter Email\n \n\n.custom-field {\n ...\n margin-bottom: 24px;\n}\n\n.custom-field .error-message {\n width: 100%;\n display: flex;\n align-items: center;\n padding: 0 8px;\n font-size: 12px;\n background: #d30909; color: #fff; height: 24px;\n}\n\n.custom-field .error-message:empty {\n opacity: 0;\n}","type":"unstyled","key":"9r3ra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важно помнить, что поле ошибки по ширине равно полю ввода и располагается под ним. Вы также можете проверить наличие ошибки и отобразить элемент сообщения об ошибке.","type":"unstyled","key":"533cp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вежливое значение показывает то, как следует сообщить пользователю об ошибке. Для данного сценария необходим такой атрибут, чтобы помочь с текстом mix ox внутри тега label.","type":"unstyled","key":"ehgjq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вывод","type":"header-three","key":"bu0c6"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":12,"offset":138}],"inlineStyleRanges":[],"text":"Данные техники можно применять для создания полей, при этом не затрагивая доступность и SEO. Разобраться в них более подробно вам поможет исходный код.","type":"unstyled","key":"fr1ej"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":6,"offset":9}],"inlineStyleRanges":[],"text":"А в этом ролике представлена информация о стилизации полей ввода.","type":"unstyled","key":"pnlq"},{"data":{"embedData":{"type":"youtube","postUrl":"https://www.youtube.com/embed/3AK3vspZvvM"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"chfr9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"e4hgv"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":38,"offset":0}],"inlineStyleRanges":[],"text":"12 ошибок начинающих веб-разработчиков","type":"unordered-list-item","key":"a6e99"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":44,"offset":0}],"inlineStyleRanges":[],"text":"Основные принципы кэширования веб-приложений","type":"unordered-list-item","key":"f6qea"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":40,"offset":0}],"inlineStyleRanges":[],"text":"Краткая история инструментов веб-дизайна","type":"unordered-list-item","key":"8sdpf"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":8,"offset":14},{"key":11,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"a0msp"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":16,"offset":15},{"key":13,"length":49,"offset":33}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Before Semicolon: How to Style any Input Field — Tips and Technique","type":"unstyled","key":"1u11i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"XkLjoJskEJhxKVhSBDmX"}],"entityMap":{"11":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://elsoncorreia.medium.com/?source=post_page-----e6a00e9dcc50--------------------------------","url":"https://elsoncorreia.medium.com/?source=post_page-----e6a00e9dcc50--------------------------------"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://medium.com/codex/how-to-style-an-input-field-with-css-only-tips-and-techniques-e6a00e9dcc50","url":"https://medium.com/codex/how-to-style-an-input-field-with-css-only-tips-and-techniques-e6a00e9dcc50"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/13981/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://necolas.github.io/normalize.css/","url":"https://necolas.github.io/normalize.css/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/:valid","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://codepen.io/beforesemicolon/pen/VwaWagB?editors=1100","url":"https://codepen.io/beforesemicolon/pen/VwaWagB?editors=1100"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"url":"https://www.youtube.com/watch?v=3AK3vspZvvM&feature=emb_imp_woyt"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://nuancesprog.ru/p/12774/","url":"https://nuancesprog.ru/p/12774/"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://nuancesprog.ru/p/12241/","url":"https://nuancesprog.ru/p/12241/"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://nuancesprog.ru/p/11769/","url":"https://nuancesprog.ru/p/11769/"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}