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

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

Статья Hubspot о трендах в веб-дизайне и примеры сайтов, где эти идеи уже воплотили в жизнь

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

Меркьюри а капелла и возрождение ICQ. Чем запомнился Design Prosmotr 2018

Кратко о самых интересных лекциях с дизайн-форума Prosmotr 2018.