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

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

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

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

В этой статье мы расскажем о приёмах 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». Пользователь снова вводит email, а сообщение об ошибке всё ещё висит в форме. Это раздражает. Поэтому сообщение об ошибке надо убирать после того, как пользователь приступает к её исправлению.

А вот пример, в котором сначала было сообщение об ошибке, но, как только вы вновь вводите курсор в поле ввода, оно сменяется на инструкцию:

Для этого мы использовали следующий код:

<!doctype html><html lang="ru-RU" prefix="og: http://ogp.me/ns#"><head><meta charset="UTF-8"></head>

<body>
<form style="width: 320px; background: #f5f5f5; padding: 15px 20px;">
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="email-txt">Email:</label><input name="email" value="" id="email-txt" oninvalid="this.setCustomValidity('Обязательно укажите валидный email!');" oninput="setCustomValidity(''); this.blur(); this.focus();" class="col-sm-7" required="" type="email">
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="url-txt">Сайт:</label><input name="url" value="" id="url-txt" oninvalid="this.setCustomValidity('Обязательно укажите валидный URL вашего сайта!')" oninput="setCustomValidity('');  this.blur(); this.focus();" class="col-sm-7" required="" type="url">
</div>
<input value="OK" type="submit">
</form>
<script>
    /*
    document.addEventListener('invalid', (function () {
    return function (e) {
        e.preventDefault();
        document.getElementById("email-txt").focus();
    };
})(), true);
*/
</script>
</body>
</html>

 

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

Спасибо!

Осталось подтвердить подписку — кликнуть по кнопке в письме, которое мы вам отправили.

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

Лидогенерация
Лидогенерация: что такое, каналы, ошибки, примеры

Лидогенерация — это не просто форма на сайте. Лидогенерация — процесс, в котором нужно продумать каналы, спланировать будущую работу с лидами и просчитать выгоду. Рассказываем подробности .

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

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

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

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