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