Редакторы: Александра Озкан, Настасья Тулаева
Поле ввода, text field, input field. Элемент графического интерфейса, предназначенный для прямого ввода значения с клавиатуры.
Редакторы: Александра Озкан, Настасья Тулаева
Поле ввода выглядит как пустая или более светлая, чем окружающий фон, прямоугольная область в рамке. Важный признак, помогающий узнать поле ввода — углубление:
Если изобразить поле как плоский прямоугольник, оно станет неотличимым от других элементов или даже простого текста на прямоугольной плашке. В этом случае пользователю приходится догадываться о роли элемента из контекста, например, окружающего текста и положения элемента в вёрстке.
Поле принимает вводимые с клавиатуры символы и команды, когда находится в состоянии фокуса. В поле появляется мигающий курсор, а на тач‑интерфейсах открывается экранная клавиатура. Чтобы минимизировать ошибки пользователя, желательно дополнительно выделять сфокусированное поле обводкой.
Различают однострочное и многострочное поля ввода (text area). Если текст не помещается в однострочное поле ввода, он сдвигается вслед за курсором по мере ввода. Видимой остаётся только та часть, которая помещается в поле:
Важно не путать это поведение с прокруткой: в отличие от многострочного поля, где текст прокручивается жестом или колесом мыши независимо от положения курсора, здесь сдвиг текста происходит только вслед за курсором при вводе и не управляется пользователем напрямую. Вне фокуса поле всегда отображает длинный текст от начала и обрезает окончание:
В многострочном поле обычно текст переносится автоматически по мере заполнения строк. Если текст не помещается в заданную высоту, он обрезается, а в поле включается прокрутка:
Прокрутка поля конфликтует с прокруткой страницы. Чтобы разрешить этот конфликт, поле настраивают так, чтобы оно автоматически растягивалось под объём текста и внутри него отдельная прокрутка не появлялась:
Размер поля выбирают так, чтобы пользователю было видно, сколько текста ожидается, и было комфортно его вводить. Многострочному полю следует дать изначальную высоту хотя бы в 3‑4 строки.
Поле по своей природе даёт вписать в него что угодно, но форма может требовать данных в определённом формате: по длине, языку, допустимым символам и т. д. Есть две стратегии валидации, то есть обеспечения корректного ввода: делать некорректный ввод невозможным или сообщать об ошибке, требуя исправления от пользователя.
Способы делать некорректный ввод невозможным:
настроить тип вводимого значения при разработке, чтобы операционная система отобразила стрелки и разрешила изменение числового значения стрелками на клавиатуре, показала подходящую экранную клавиатуру или барабан и пр.:
игнорировать недопустимые символы, не давать их ввести (без обратной связи пользователь может решить, что поле сломано).
исправлять автоматически по мере ввода, например, заменяя кириллицу соответствующей латиницей (важно обрабатывать ввод до появления символа на экране, чтобы он не менялся на глазах у пользователя);
использовать маску, т. е. шаблон ввода типовых данных, таких как номер телефона (при разработке стоит обратить внимание на ожидания пользователя в разных сценариях ввода: вставке, в том числе из буфера обмена; стирании; анду):
Сообщать об ошибке следует, когда пользователь закончит ввод (значение вполне может быть некорректным, пока человек его ещё не дописал):
Если ошибка состоит просто в том, что обязательное поле не заполнено, сообщение лучше отложить до отправки формы, иначе оно появится, если пользователь просто сфокусирует и расфокусирует поле (нарушает принцип обратимости). Убирать сообщение об ошибке следует, как только она исправлена.
Бледный текст традиционно означает отключённое, недоступное состояние элемента. В поле ввода это значит, что текст неизменяем. Тот же стиль иногда используют для отображения внутри поля его подписи, примера заполнения, подсказки или маски. Если не следить за последовательностью в использовании стилей, пользователь будет введён в заблуждение:
Комбобокс, combo box. Элемент графического интерфейса, гибрид поля ввода и выпадающего списка. В комбобокс можно как ввести значение напрямую с клавиатуры, так и выбрать из предложенного перечня, на что намекает стрелочка в конце:
Если в выпадающем списке можно выбрать значение только из доступных в перечне, то у комбобокса роль перечня лишь в ускорении ввода наиболее типовых. Вручную можно ввести другое значение:
Введённое однажды вручную значение иногда добавляется в сам перечень для ускорения последующего ввода.
В хороших реализациях комбобокса его встроенный перечень используется как словарь для автодополнения:
Важно отличать выпадающую часть комбобокса от всплывающего списка автодополнения. Выпадающая часть комбобокса всегда остаётся неизменной (её можно раскрыть, когда значение уже введено, и выбрать другое значение), а всплывающий список автодополнения фильтруется по мере ввода так, что в нём остаются только подходящие варианты завершения ввода.
Пример использования комбобокса в операционных системах — выбор размера шрифта:
Уважаемые советчики! Что бы вы исправили или дополнили?