За маркетинг и двор стреляю в упор!

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 — каждое слово с заглавной буквы.
 

Узнавайте об обновлениях блога Email Soldiers первым

Похожие статьи

Никто не любит поп-апы, зачем тогда ими пользоваться
Никто не любит поп-апы, зачем тогда ими пользоваться?

Собрали статистику, как пользователи относятся к поп-апам: как часто подписываются, как часто закрывают, в чём разница между мобильными и десктопными пользователями.

Сбор качественной базы подписчиков
Клиентам о email-маркетинге, часть 2. Сбор качественной базы подписчиков

Вторая статья из цикла о email-маркетинге. Рассказываем, на чём строится качественная лидогенерация — что нужно или не нужно делать, когда вы собираете собственную базу контактов.

Подборка отличных идей для форм подписки на сайте
Подборка отличных идей для форм подписки на сайте

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