В ITpelag написали для начинающих о полях ввода и формах.

— У поля должна быть подпись. В ней указывайте, что должно быть введено («Имя», а не «Введите имя»). Без двоеточия;
— Не размещайте подпись в плейсхолдере — так пользователь не сможет перепроверить правильность заполнения полей в большой форме;
— В плейсхолдере можно показать формат или пример вводимых данных;
— В поле можно расположить контролы, помогающие его заполнить: сканирование из QR-кода, скрытие и отображение пароля, голосовой ввод;
— Если поле часто очищают, предусмотрите контрол его очистки;
— Ширина поля должна соответствовать вводимым данным — так проще понять, что надо ввести, и убедиться, что поле заполнено верно;
— Маски ввода помогают не ошибиться, например, в количестве необходимых символов;
— Отмечайте необязательные поля. Обычно (если форма спроектирована хорошо) необязательных полей меньше, чем обязательных;
— Проверяйте поле на корректность после его заполнения — фокус ушёл с поля или пользователь нажал на кнопку отправки формы;
— Поля большой формы делите на логические группы или даже на отдельные шаги — чтобы не пугать пользователей её монолитностью или количеством полей.

#input #form

Илья Бирман написал о поле ввода и его отличиях от комбобокса.

Поле ввода позволяет ввести значение с клавиатуры. В состоянии фокуса в поле появляется курсор, в тач-интерфейсе — экранная клавиатура.

Если текст не помещяется в поле, он сдвигается вслед за курсором (из комментария: отсутствие горизонтальной прокрутки — скорее недоработка привычной реализации). Вне фокуса поле отображает начало длинного текста и обрезает его конец.

Бывают однострочные и многострочные поля (text area). В последних текст может переноситься на следующие строки, и возможна вертикальная прокрутка, если высоты поля не хватает для отображения всего текста. Чтобы скрол в поле не конфликтовал с прокруткой страницы, высоту поля можно автоматически увеличивать под введённый текст.

Чтобы размер поля подсказывал, какой объём контента оно ожидает, и был удобен для ввода, многострочное поле по умолчанию делают высотой в 3–4 строки.

Чтобы сократить количество ошибок, можно ограничивать допустимые для ввода символы. Например, можно настроить, чтобы поле принимало только цифры. Для таких полей некоторые системы могут отображать стрелки для изменения значения на единицу вверх и вниз, менять значение стрелками на клавиатуре, отображать специальные экранные клавиатуры только с цифрами (или барабан).

Но можно просто сообщать об ошибках ввода. Делать так стоит, когда пользователь закончил ввод. Сообщение о том, что обязательное поле не заполнено, лучше отложить до момента отправки формы (иначе ошибка будет после простого анфокуса с поля).

Комбобокс — гибрид поля ввода и выпадающего списка, в котором можно как ввести любое значение в поле, так и выбрать его из списка. Пример: поле для выбора размера шрифта.

Введённое вручную значение иногда добавляют в выпадающий список для ускорения последующего ввода. В хороших реализациях список используют как словарь для автодополнения.

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

#input #combo_box