Шаг вперед в дизайне веб-форм: как создать визуальные подсказки при неправильном вводе с помощью svg в Input

Визуальные подсказки при неправильном вводе являются неотъемлемой частью современных веб-форм. Когда пользователь вводит данные в форму, такую как электронная почта или пароль, важно сообщать ему о возможной ошибке в заполнении поля до того, как он нажмет кнопку отправки. Ошибки в заполнении формы могут привести к снижению удобства использования, а также к снижению конверсии на сайте.

SVG в Input

Вместо того, чтобы использовать стандартные текстовые сообщения об ошибке, веб-дизайнеры начали использовать SVG-графику для создания более четких и эстетически приятных подсказок. Это может быть картинка вводного поля, которая демонстрирует правильный формат введения данных, например адрес электронной почты, или даже анимация, которая показывает, что текущее значение поля неверное.

Кроме того, использование SVG-графики для создания визуальных подсказок для ошибок в заполнении полей имеет ряд преимуществ. SVG-файлы легкие, масштабируемые и не теряют качество при изменении размеров, что обеспечивает качественную работу на всех устройствах.

Создание визуальных подсказок

Создание визуальных подсказок в форме, используя SVG-графику, может быть легко выполнено с помощью средств, которые уже есть в CSS и HTML.

Вот несколько примеров того, как использовать SVG-графику для создания визуальных подсказок в форме:

1. Использование графических элементов, которые могут быть изменены при правильном или неправильном вводе

<input type="text" id="email" placeholder="Введите вашу электронную почту">
<svg role="img" class="valid" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512"><path fill="#28a745" d="M458.3 145L190.9 411.5 53.7 274.3c-12.5-12.5-12.5-32.8 0-45.2l45.2-45.2c12.5-12.5 32.8-12.5 45.2 0l77.2 77.2L368 118.5c12.5-12.5 32.8-12.5 45.2 0l45.2 45.3c12.5 12.4 12.5 32.7 0 45.2z"></path></svg>
<svg role="img" class="invalid" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512"><path fill="#dc3545" d="M265.7 256L459.4 62.4c12.5-12.5 12.5-32.8 0-45.2L414.2 18c-12.5-12.5-32.8-12.5-45.2 0L256 211.7 62.4 18.1c-12.5-12.5-32.8-12.5-45.3 0L18 62.4c-12.5 12.5-12.5 32.8 0 45.3L211.7 256 18.1 449.6c-12.5 12.5-12.5 32.8 0 45.2l45.2 45.2c12.5 12.5 32.8 12.5 45.3 0L256 300.3l193.6 193.6c12.5 12.5 32.8 12.5 45.2 0l45.2-45.2c12.5-12.5 12.5-32.8 0-45.3z"></path></svg>

В этом примере мы используем графику с отмеченным зеленым и красным цветами, чтобы показать, верен ли ввод пользователя. При правильном вводе текстовое поле оформляется зеленым охраняющим знаком, а при неправильном - красным.

2. Использование анимаций svg

<input type="password" id="password" placeholder="Введите пароль">
<svg xmlns="http://www.w3.org/2000/svg" class="animation" viewBox="0 0 512 512"><path fill="#dc3545" d="M256 512c-68.4 0-134.5-26.7-183.9-76.1C26.7 390.5 0 324.4 0 256s26.7-134.5 76.1-183.9C121.5 26.7 187.6 0 256 0s134.5 26.7 183.9 76.1C485.3 121.5 512 187.6 512 256s-26.7 134.5-76.1 183.9C390.5 485.3 324.4 512 256 512zm0-472c-110.5 0-200 89.5-200 200s89.5 200 200 200 200-89.5 200-200-89.5-200-200-200z"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 256 256" to="360 256 256" dur=".8s" repeatCount="indefinite"/></path></svg>

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

Заключение

Создание визуальных подсказок вместо текстовых сообщений об ошибках при заполнении формы может помочь сайтам увеличить конверсию и удобство использования для пользователей. Использование SVG-графики дает возможность создавать легкие, масштабируемые и не теряющие качества файлы. Важно учитывать, что приведенные выше примеры являются лишь некоторыми из возможных вариантов, креативность и фантазия веб-дизайнера здесь не знают границ.

Смотри также: