Как сделать форму ввода, удобную даже для котиков

6 приёмов вёрстки, чтобы сделать удобную форму



Чтобы пользователь правильно заполнил форму (и заполнил её вообще), она должна быть не только красивой и понятной, но и правильно свёрстанной.

В этой статье мы расскажем о приёмах HTML5, которые влияют на поведение формы и делают её заполнение чуточку удобнее.

Клик по названию поля и чекбоксу

Для названий полей используйте тег label. Так пользователи смогут поставить или убрать галку, кликнув по названию, вместо того, чтобы целиться мышью в миниатюрный чекбокс.

<form>
<label for="ok-cb">Я согласен:</label> 
<input id="ok-cb" name="ok" type="checkbox" value="1" />&nbsp;
</form>

Обратите внимание, чтобы атрибут for в теге label соответствол атрибуту id тега input.

Этот же тег сработает, чтобы курсор перемещался в текстовое поле после клика по названию.



Автозаполнение

В браузерах есть автозаполнение форм: если пользователь уже заполнял текстовое поле с атрибутом name на других сайтах, они добавятся автоматически при заполнении поля с таким же именем. Чтобы это сработало, называйте текстовые поля общепринятыми названиями — email, phone, name, address.

<input type="email" name="email" />



Курсор в первом поле для ввода

Есть страницы, на которых отображается только форма, например, страница входа в аккаунт:

В таких случаях удобно размещать курсор в первое поле ввода. Это можно сделать через функцию focus в JavaScript.

<input type="email" name="email" id="email-input" />
<script>
document.getElementById(‘email-input’).focus();
</script>

Чтобы пользователь мог отправить форму простым нажатием Enter на клавиатуре и не кликал лишний раз мышью, используйте такой код:

<input type="submit" value="OK" /> 

Когда вы открываете эту статью, вас перебрасывает в середину текста, к конкретной форме. Это значит, что она работает:



Защита от некорректно введённых данных

В HTML5 помимо текстового, существуют и другие типы полей. Используйте их, чтобы пользователи не делали ошибок при вводе текста: поля с ошибками подсветят розовым.

  • type=»email» — для адреса электронной почты
  • type=»date» — для дат
  • type=»time» — для времени
  • type=»url» — для cсылок
  • type=»number» — для цифр

Последний тип имеет дополнительные атрибуты — минимальное и максимальное значение и шаг. Пользователь сможет менять значение поля при помощи стрелок на клавиатуре или экране.

<input type="number" name="number" value="" min="1" max="5" step="0.5" />



Показываем пользователю, в чём ошибка

Чтобы показать пользователю, где именно ошибка и в чём она заключается, используйте атрибут required. Если поле не заполнено или заполнено неверно, при попытке отправить форму выскочит ошибка. Текст ошибки можно задать свой.

<input type="email" name="email" required 
oninvalid="this.setCustomValidity('Пожалуйста, напишите email латинскими буквами')" oninput="setCustomValidity('')" />



Ограничиваем длину поля и заглавные буквы

Если вам нужно ограничить длину поля, используйте атрибут maxlength. Пример — код для поля, в котором нельзя ввести больше четырёх символов:

<input maxlength="4" name="code" type="text" /> 

Иногда нужно заставить вводить пользователя только заглавные или только строчные буквы. В этом поможет CSS-стиль text-transform.

<input name="name" style="text-transform:uppercase" type="text" />

Режимы преобразования:

  • uppercase — все заглавные,
  • lowercase — все строчные,
  • capitalize — каждое слово с заглавной буквы.



 

Попробуйте наш собственный

Сервис сбора подписчиков
Подборка отличных идей для форм подписки на сайте Подборка отличных идей и примеров, как можно создать форму подписки на сайте.
Почтовый ящик

Приводим 8 простых способов и инструментов, чтобы собирать подписчиков в свою базу рассылки.

Простая и понятная схема с видами всплывающих окон и примеры поп-апов.

Можно ли нам доверять