Допиши ЭТО в CSS, чтобы input в формах работал

Бесплатный мини-курс по Data Science с нуля от Skillbox - l.skbx.pro/ETG...
Часто новички, верстая форму, делают только визуальную часть, не продумывая логику ошибок от пользователя. Из этого видео вы узнаете о рабочих техниках, как доработать это.
Демо - codepen.io/ann...
Про user-valid и user-invalid - drafts.csswg.o... (поддержка почти 88%, август 2024 года)
🔵 Telegram - t.me/frontendblok
🔵 Чат Telegram - t.me/frontendb...
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔵 Дзен - zen.yandex.ru/...
🔵 ВК - tpverstak
🔴 Обучение - frontendblok.com

[@ЕгорПузырев-д9е]

Очень полезно для новичков!!!

[@Al-Mas3000]

Спасибо. Очень полезная фишка.

[@reversplay529]

Спасибо тебе большое за твой контент. Очень доступно поясняешь, могут понять даже новички =)

[@astalexxx]

только толку ноль... Это не используется в коммерческих проектах.

[@sashavarava7933]

Спасибо. Не знал, что такие свойства есть. Валидацию делал через JS. Супер, все гораздо проще.

[@JesseJames-mh5kb]

Полезное видео, спасибо тебе Анна Блок! Даже фамилия имеет отсылку к верстке! Хотя и в стройке тоже есть блоки. Ими фундамент делают и заборы, но не суть

[@ozimnadius]

Очень полезно, для старичков тоже.👍

[@edmondhamilton995]

Классно и полезно!

[@svetlanaandreeva8762]

Спасибо. Очень полезно,

[@Delegat521]

Расскажите еще про поле с телефоном, как его валидировать правильно, какие маски использовать, например если нужен код страны/города

[@ИмяФамилия-э4ф7в]

Js и регулярки в помощь

[@astalexxx]

тут даже мыло не валидируется нормально)))) это все фигня для новичков, которіе начинают думать, что разбираются

[@WERWOLION]

Ну тут полезно одназначно

[@КарлВеликий-д1ф]

Анна топ)

[@ValesValesskiy]

Поля окрасили себя в те цвета, в которые они окрасили себя.

[@АлексейСоколов-у3к]

плавность перехода цвета границы можно сделать так?

[@annblok_webdev]

да, если в input добавить transition

[@nikman5541]

Для новичков да, опытные ребята просто через JS это сделают, а там и валидировать проще

[@ozimnadius]

Это не всегда так.

[@vladimirfesenko12345]

Подскажите, можно ли при помощи такого метода делать более сложную валидацию пароля?

[@annblok_webdev]

Более сложную - это какую?

[@vladimirfesenko12345]

@@annblok_webdev чтобы пароль соответствовал сразу нескольким критериям, как это обычно бывает на сайтах, сколько-то символов, буквы в верхнем и нижнем регистре, определенные спецсимволы, цифры. Такую.

[@YourHeIper]

Это уже скорее через js лучше​@@vladimirfesenko12345

[@НиколайВоскобойников-ш8з]

@@vladimirfesenko12345 В теле самой страицы Стоит, однако, понимать, что проверка на стороне фронтенда ни в коем случае не может подразумеваться как замена проверке на стороне бэкенда (сервера). Это чисто так - пользователю обратную связь дать по тому, что от него ждут и что он навводил.

[@vladimirfesenko12345]

@@НиколайВоскобойников-ш8з ух ты, круто. Не знал, что можно регулярки прям в HTML писать. Спасибо. Попробую.

[@shaman8016]

Вроде как по стандарту мы должны оборачивать input в label. Почему это здесь не показано? Второй вопрос на input отсутсвует атрибут name. Что является важной частью данного тэга. И третье если input будет обернут в label получается вся эта красота пропадет, если стили будут именно на lable.

[@annblok_webdev]

Нет такого стандарта, прогоните через валидатор пример и увидите ровно 0 ошибок. используют чаще всего как предзаголовок перед инпут, чтобы его можно было установить в любой части перед полем, как показано на 03:04. Если вы его обернёте, то такая возможность пропадёт. Вывод: всё зависит строго от макета. А вот атрибут name указать можно, но в рамках примера его указывать было не актуально. Если вы ставите форму на сайт и таких форм очень много по сайту, то писать name надо.

[@kosmodemyan_sugar]

Вам просто нравится Анна, вы возжелаете ее, но знаете что не получите. Поэтому и придираетесь - как в школе за косички дергаете.

[@bapydev]

@@kosmodemyan_sugar апхахпвавп

[@zvagolskyaleksey168]

​@@kosmodemyan_sugar че ты несешь пздц

[@perahuda]

Откуда такой стандарт?) Что за чушь

[@Pavelius]

Добавил бы js

[@Irina_str]

React Hook Form и вообще никаких проблем с формами. Любыми.

[@zloy_ax8496]

+

[@gonqii]

input type="sumit"

[@nto-i7h]

не понятно кому и для каких целей это могло бы быть полезно с вендорной поддержкой не выше 85%. На реальном продакшене решения с таким уровнем поддержки здоровые на голову разрабы точно не используют. Хотя новичкам зайдет.. Есть повод по-охать и по-ахать, по-удивляться.. Но реальную валидацию на продакшене лучше и желательно делать только на js