Подписывайтесь на мой твиттер, там всегда что-нибудь интересное!Как довести работу с <form> до идеала
#html#формы
У всех у нас были моменты, когда при использовании автозаполнения мы попадали в полный беспорядок. Одни поля остаются пустыми, другие заполняются неверными значениями, а еще одни полагаются на placeholder’ы, которые должны нам сказать то, чем же должна быть заполнена форма. Правильно ли вы в таком случае введете содержимое формы?
Возможно единственным способом убедиться в верности заполненного значения будет удаление значения, выставленного автозаполнением, чтобы увидеть заново placeholder. Это расстраивает и вообще так не должно быть, в принципе.
Делаем разметку правильно
Хорошая форма начинается с правильной разметки.
Выключаем автокоррекцию
Выключайте autocorrect, когда он вам не нужен. Очень надоедает, когда система пытается что-то исправить, особенно если она не знает что. Это могут быть имена, названия улиц, компаний и городов. Всякий раз, когда вы пишете <input>, спросите себя: является ли потенциальное значение чем-то из общепринятого словаря? Если ответ — нет, то выключайте автокоррекцию. Вам это не нужно и пользователю уж темболее.
<input autocorrect="off" ...>2. Выключайте autocapitalise
Выключайте его когда он вам не нужен. Похоже, что этот подход можно применить только к полям email, но поверьте, это очень удобно, избегать того, чтобы первый символ email был написан с большой буквы.
<input autocapitalize="off" …>3. Используйте autocomplete
Этот атрибут позволяет вам контролировать то, как браузер должен заполнять заданные поля формы. Это ключ к правильно работающему автозаполнению. Популярными значениями для атрибута являются: name, email, username, new-password и current-password, но лист значений которые вы можете использовать может быть буквально бесконечным.
<input autocomplete="tel" …>
<input autocomplete="email" …>4. Используйте required
Этот атрибут указывает на то, что поле ввода должно быть обязательно заполнено перед отправкой. Старайтесь использовать его, вместо валидации на JS, тогда, когда это возможно. Лучше дать браузеру сделать эту работу, вместо изобретения колеса с кастомной валидацией.
Браузеры по дефолту делают очень много: например, появляется подсказка и input попадает под видимость, когда пользователь пытается засабмитить пустое, требующее заполнение поле.
Так же рекомендуется указывать на обязательность заполнения поля, добавляя подсказку для пользователя рядом с input или label. И даже тогда, когда все поля требуют заполнения.
<input required ...>5. Используйте type и pattern
Сенсорные устройства могут показывать разные, оптимизированные клавиатуры для каждой формы ввода, сразу же, как вы укажете им это сделать. Для примера: цифровая клавиатура на iPhone 6S имеет область-клика на 521% больше, чем дефолтная клавиатура. И это просто идеально для инпутов, которые принимаются только числовые значения.
Оптимизированные шаблоны клавиатуры могут быть вызваны при использовании type и pattern атрибутов. Есть также новый атрибут inputmode, но пока что он не может использоваться во многих браузерах.
Используйте pattern="[0–9]*" или inputmode="numeric" для вызова числовой клавиатуры.
Используйте type="email", чтобы вызвать email клавиатуру.
Используйте type="url", чтобы вызвать url клавиатуру.
<input pattern="\d*" ...>
<input type="email" ...>
<input type="url" ...>5. Используйте лейблы
Дизайнеры и разработчики любят пропускать <label>, так как это делает форму чище, а код и стилизацию проще, но он играет важную роль для пользователей. Контроль формы, который полагается только на placeholder, является неидентифицируемым при заполнении. Это является особенной проблемой, тогда когда форма была заполнена с использованием автозаполнения: пользователи не могут сказать, заполнен ли input правильно, пока они не удалят введенное значение.
<label for="email">E-Mail</label>
<input id="email" …>6. Используйте placeholder
Placeholder это подсказка для пользователя. Они всегда должны показывать потенциальное значение в ожидаемом формате. Такие placeholder как +49 или https:// идеальны для того, чтобы сказать пользователям, что они должны начать вводить номера телефонов с кода страны, а ссылки с протокола.
<input placeholder="Jane Doe" …>7. Используйте disabled
Используйте этот атрибут, чтобы деактивировать поля ввода. Не класс. Я повторяю: не класс. disabled может быть применен ко всем контроллерам форм и говорить браузеру, чтобы пользователь не использовал этот элемент. Добавление дополнительного класса в плане стилизации это ок, но помните, что вы можете также выбрать элемент с использованием input[disabled] в CSS.
<select disabled>
<option value="a">A</option>
<option value="b">B</option>
</select>
<select>
<option disabled>Choose A or B</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
<input disabled ...>
<textarea disabled ...></textarea>Получаем правильное юзабилити
Правильная разметка это уже хорошая база для хорошего юзабилити. autocorrect, autocapitalize и autocomplete упрощают заполнение формы, используя type и pattern, вы точно будете знать, что сенсорные устройства показывают оптимизированную клавиатуру и placeholder дает пользователям знать, что им нужно ввести. Но этого недостаточно. Все еще есть множество моментов, в которых вы можете ошибиться, когда дело доходит до стилизации и общей структуры. Вот три отличных ресурса, чтобы улучшить UX ваших форм.
UX Movement. Это блог, который вам поможет улучшить ваши интерфейсы, показывая то, как хороший и плохой дизайн практически влияют на поведение пользователя.
E-commerce UX исследование — раскрывает то, какие дизайн-проекты вызывают проблемы с юзабилити и как создать опыт взаимодействия в e-commerce по последнему слову техники. Бесплатные статье также содержат некоторые отличные посты, относящиеся к формам и инпутам.
Делаем стилизацию правильно
Стилизация формы это кошмар. Элементы даются со своим собственным стилем, который варьируется от системы к системе и от браузера к браузеру. Есть даже многостраничное руководство на MDN, объясняющее то, почему так тяжело стилизовать виджеты с CSS?
Я провел очень много времени за стилизацией форм, так что принял решение сделать базу дефолтных стилей для распространенных input элементов: formbase устраняет кроссбраузерные баги, несоответствия между системами и применяет красивую дефолтную стилизацию для нескольких элементов input. Ноль зависимостей, без JavaScript, только CSS.
Альтернатива formbase это Boilerform: маленький бойлерплэйт из HTML и CSS, который начался с подачи Chris Coyier (A Boilerform Idea) Она уже превратилась в проект, который пытается сделать работу с формами безболезненной.
Примеры разметки
Я бы хотел завершить этот пост несколькими примерами, показывающими распространенные поля ввода и их правильные атрибуты. Заходите в эту секцию всякий раз, когда вы пишите форму, чтобы убедиться в том, что ваша разметка соответствует лучшим практикам в этом деле.
Имя
Совет: всегда используйте одно имя, вместо разделения одного целого инпута.
<label for="name">Name</label>
<input id="name" name="name" type="text" autocorrect="off" autocomplete="name" placeholder="Jane Doe">Компания
<label for="company">Company</label>
<input id="company" name="company" type="text" autocorrect="off" autocomplete="organization" placeholder="World Wide Web Consortium">Почтовый код
Совет: некоторые страны используют буквы в своих почтовых кодах. Убедитесь, что вы удалили pattern, когда пользователю нужно будет ввести почтовый код одной из таких стран.
<label for="postalcode">Postal code</label>
<input id="postalcode" name="postalcode" type="text" pattern="\d*" novalidate autocorrect="off" autocomplete="postal-code" placeholder="02139">Город
<label for="city">City</label>
<input id="city" name="city" type="text" autocorrect="off" autocomplete="address-level2" placeholder="Cambridge">Улица
<label for="country">Country name</label>
<input id="country" name="countryname" type="text" autocomplete="country" placeholder="Germany">Телефон
<label for="tel">Phone</label>
<input id="tel" name="tel" type="tel" autocorrect="off" autocomplete="tel" placeholder="+1 617 253 5702"><label for="email">E-Mail</label>
<input id="email" name="email" type="email" autocapitalize="off" autocorrect="off" autocomplete="email" placeholder="janedoe@example.com">Дата рождения
<label for="birthday">Birthday</label>
<input id="birthday" name="birthday" type="date" autocorrect="off" autocomplete="bday" placeholder="YYYY-MM-DD" disabled>
