Текстовые поля

Статья
03/12/2025

Заметка

Это руководство по проектированию было создано для Windows 7 и не было обновлено для более новых версий Windows. Большая часть рекомендаций по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.

С помощью текстового поля пользователи могут отображать, вводить или изменять текст или числовое значение.

снимок экрана типичного текстового поля и метки

Обычное текстовое поле.

Заметка

Рекомендации по макету, шрифты и воздушных шаров представлены в отдельных статьях.

Это правильный элемент управления?

Чтобы решить, рассмотрите следующие вопросы:

Можно ли эффективно перечислить все допустимые значения? Если это так, рассмотрите списка, представлении списка, раскрывающемся списке, редактируемом раскрывающемся списке или ползунок.
Являются ли допустимые данные полностью неограниченными? Или допустимые данные ограничены только по формату (ограниченной длине или типам символов)? В этом случае используйте текстовое поле.
Представляет ли значение тип данных, имеющий специализированный общий элемент управления? Примеры включают адрес даты, времени или IPv4 или IPv6. Если да, используйте соответствующий элемент управления, например элемент управления датой, а не текстовое поле.
Если данные числовые:
- Воспринимают ли пользователи параметр как относительное количество? В этом случае используйте ползунок.
- Будет ли пользователь воспользоваться мгновенными отзывами о влиянии изменения параметров? Если да, используйте ползунок, возможно, вместе с текстовым полем. Например, пользователи могут легко выбрать цвет с помощью ползунка, так как они могут сразу увидеть влияние изменений на оттенки, насыщенность или значения света.

Концепции проектирования

Хотя текстовые поля имеют преимущество быть очень гибкими, они имеют недостаток наличия минимальных ограничений. Единственными ограничениями для редактируемого текстового поля являются:

При необходимости можно задать максимальное количество символов.
При необходимости можно ограничить входные данные только числовыми символами (0 9).
Если вы используете элемент управления спином, можно ограничить варианты управления спином допустимыми значениями.

Помимо их длины и необязательного присутствия элемента управления спином текстовые поля не имеют визуальных подсказок, которые предлагают допустимые значения или их формат. Это означает, что для передачи этой информации пользователям используются метки. Если пользователи вводят недопустимый текст, необходимо обработать ошибку с сообщением об ошибке.

В качестве общего правила следует использовать самый ограниченный элемент управления, который можно. Используйте не ограниченные элементы управления, такие как текстовые поля, в качестве последнего средства. Тем не более чем при рассмотрении ограничений следует учитывать потребности глобальных пользователей. Например, элемент управления, ограниченный почтовыми кодами США, не глобализация, но не ограничено текстовое поле, которое принимает любой формат почтового кода.

Шаблоны использования

Текстовое поле — это гибкий элемент управления с несколькими возможными способами использования.

Ярлык	Ценность
входные данные Однострочный текстовый поле без ограничений, используемое для ввода или редактирования коротких строк.	Однострочного текстового поля без ограничений.
Форматированные входные данные Набор коротких, фиксированных и однострочных текстовых полей, используемых для ввода данных с определенным форматом.	Текстовое поле, используемое для отформатированных входных данных. Примечание.функция автоматического выхода автоматически перемещает фокус ввода от одного текстового поля к следующему. Одним из недостатков этого подхода является то, что данные не могут быть скопированы или вставлены в одну единицу.
вспомогательные входные данные Однострочный текстовый поле без ограничений, используемое для ввода или редактирования строк, в сочетании с кнопкой команды, которая помогает пользователям выбирать допустимые значения.	В этом примере команда "Обзор" помогает пользователям выбирать допустимые значения.
текстовые Многострочный текстовый поле без ограничений, используемое для ввода или редактирования длинных строк.	снимок экрана Многострочного текстового поля без ограничений.
числовые входные Однострочного текстового поля, используемого для ввода или редактирования чисел, с необязательным элементом управления спина для упрощения ввода на основе мыши.	времени ожидания Текстовое поле, используемое для числовых входных данных. Сочетание текстового поля и связанного элемента управления спином называется спин-поле.
ввод пароля и ПИН-кода Однострочный текстовый поле без ограничений, используемое для безопасного ввода паролей и ПИН-кодов.	Текстовое поле, используемое для ввода паролей.
выходных данных Однострочный текстовый поле только для чтения, всегда отображаемое без границы, используемое для отображения коротких строк.	В отличие от статического текста, данные, отображаемые с помощью текстового поля, можно прокручивать (полезно, если данные шире элемента управления), выбранные и скопированные. Однострочного текстового поля только для чтения, используемого для отображения данных.
текстовые выходные Многострочного текстового поля только для чтения, используемого для отображения длинных строк.	Текстовое поле только для чтения, используемое для отображения данных.

Руководящие принципы

Общее

При отключении текстового поля также отключите все связанные метки, метки инструкций, элементы управления спином и кнопки команд.
использовать автоматическое завершение, чтобы помочь пользователям вводить данные, которые, скорее всего, будут использоваться многократно. Примеры включают имена пользователей, адреса и имена файлов. Однако не используйте автоматическое завершение для текстовых полей, которые могут содержать конфиденциальную информацию, например пароли, ПИН-коды, номера кредитных карт или медицинскую информацию.
Не прокрутите пользователей ненужным образом. Если вы ожидаете, что данные будут больше текстового поля, и вы можете легко сделать текстовое поле более большим, не причиняя вреда макету, размер поля, чтобы устранить необходимость прокрутки.

неправильно:

В этом примере текстовое поле должно быть сделано гораздо дольше для обработки своих данных.
Полосы прокрутки:
- Не помещайте горизонтальные полосы прокрутки в многострочный текстовый прямоугольник. Вместо этого используйте вертикальное прокрутку и оболочку линий.
- Не помещайте полосы прокрутки в текстовые поля с одной строкой.
Для числовых входных данных можно использовать элемент управления спином. Для текстовых входных данных используйте раскрывающийся список или редактируемый раскрывающийся список.
Не используйте функцию автоматического выхода, за исключением форматированных входных данных. Автоматическое перемещение фокуса может удивить пользователей.

Редактируемые текстовые поля

Ограничить длину входного текста, если можно. Например, если допустимые входные данные являются числом от 0 до 999, используйте числовое текстовое поле, которое ограничено тремя символами. Все части текстовых полей, использующих форматированные входные данные, должны иметь короткую фиксированную длину.
Будьте гибкими с форматами данных. Если пользователи, скорее всего, вводят текст, используя широкий спектр форматов, попробуйте обработать все наиболее распространенные. Например, можно ввести множество имен, чисел и идентификаторов с необязательными пробелами и знаками препинания, а заглавная буква часто не имеет значения.
Если вы не можете обрабатывать вероятные форматы, требуется определенный формат, используя отформатированные входные данные или указывая допустимые форматы в метке.

Допустимо:

В этом примере текстовое поле требует ввода в определенном формате.

Лучше:

В этом примере форматированный шаблон ввода данных используется для использования определенного формата.

Лучшие:

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

В этом примере форматированный шаблон ввода данных не используется, чтобы пользователи могли вставлять IPv6-адреса.
Если пользователи, скорее всего, будут повторно вводить все значения, выделите весь текст на фокусе ввода. Если пользователи, скорее всего, отредактируют курсор в конце текста.

снимок экрана

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

В этом примере пользователи, скорее всего, добавляют ключевые слова, чем заменяют текст, поэтому в конце текста помещается курсор.
всегда использовать многострочный текстовый поле, если новые символы являются допустимыми входными данными.
Если текстовое поле предназначено для файла или пути, всегда укажите кнопку "Обзор".

Числовые текстовые поля

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

правильно:

В этом примере единица помечена, но требуется, чтобы пользователи вводили десятичные числа.

Лучше:

В этом примере текстовое поле использует более удобную единицу.
Используйте элемент управления спином всякий раз, когда это полезно. Однако иногда элементы управления спином не являются практическими, например, когда пользователям нужно вводить большое количество. Используйте элементы управления спином, когда:
- Входные данные, скорее всего, будут небольшим числом, как правило, менее 100.
- Пользователи, скорее всего, вносят небольшое изменение в существующее число.
- Пользователи, скорее всего, будут использовать мышь, чем клавиатура.
выровнять числовой текст по правому краю при каждом
- Существует несколько числовых текстовых полей.
- Текстовые поля выровнены по вертикали.
- Пользователи, скорее всего, будут добавлять или сравнивать значения.
правильно:

В этом примере числовой текст выровнен по правому краю, чтобы упростить сравнение значений.

неправильно:

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

неправильно:

снимок экрана

В этом примере значение -1 имеет особое значение.

правильно:

В этом примере флажок делает параметр явным.

Входные данные паролей и ПИН-кода

Всегда используйте общий элемент управления паролем вместо создания собственного. Пароли и ПИН-коды требуют безопасной обработки.

Дополнительные рекомендации и примеры см. в разделе Шары.

Текстовые выходные данные

Рекомендуется использовать белый цвет системы фона для большого многострочного текста только для чтения. Белый фон упрощает чтение текста. Много текста на сером фоне не рекомендует читать.

Дополнительные сведения о цветах фона см. в шрифтах.

Выходные данные

Не используйте границу для однострочных текстовых полей только для чтения. Граница является визуальным ключом к редактированию текста.
Не отключать однострочные текстовые поля только для чтения. Это позволяет пользователям выбирать и копировать текст в буфер обмена. Кроме того, пользователи не могут прокручивать данные, если они превышают размер границ.
Не устанавливайте остановку табуляции в одностроочном текстовом поле только для чтения, если пользователь, скорее всего, не должен прокручивать или копировать текст.

Обработка входных данных и обработка ошибок

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

Если пользователь вводит недопустимый символ, игнорируйте символ и отображайте проблемы ввода, которая объясняет допустимые символы.

снимок экрана

В этом примере воздушный шар сообщает неправильный входной символ.
Если входные данные имеют значение или формат, который не является допустимым, отобразится воздушный шар, когда текстовое поле теряет фокус ввода.
Если входные данные не соответствуют другим элементам управления в окне, предоставьте сообщение об ошибке при завершении всего ввода, например, когда пользователи нажимают кнопку "ОК" для модального диалогового окна.

Не очищайте недопустимые входные данные, если пользователи не могут легко исправить ошибки. Это позволяет пользователям исправлять ошибки без начала. Например, следует очистить неправильные пароли и ПИН-коды, так как пользователи не могут их легко исправить.

Дополнительные рекомендации и примеры см. в сообщения об ошибках и воздушных шаров.

Запросы

Запрос — это метка или короткая инструкция, помещенная в текстовое поле в качестве значения по умолчанию. В отличие от статического текста, запросы исчезают с экрана, когда пользователи вводят что-то в текстовое поле или получает фокус ввода.

снимок экрана текстового поля запроса с меткой: поиск

Типичный запрос.

Используйте запрос, когда:

Пространство экрана находится на таком уровне уровня "Премиум", что использование метки или инструкции нежелательно, например на панели инструментов.
Запрос в первую очередь предназначен для определения цели текстового поля компактным способом. Это не должно быть важной информацией, которую пользователь должен видеть при использовании текстового поля.

Не используйте запросы только для направления пользователей на ввод чего-либо или нажатия кнопок. Например, не записывайте текст запроса, который говорит ввод имени файла, а затем нажмите кнопку "Отправить".

При использовании запросов:

Рисуйте текст запроса в курсивном сером цвете и фактический входной текст в обычном черном цвете. Текст запроса не должен быть перепутан с реальным текстом.
Оставить текст запроса кратким. Фрагменты можно использовать вместо полных предложений.
Используйте прописную букву в стиле предложений.
Не используйте конечные знаки препинания или многоточия.
Текст запроса не должен быть редактируемым и должен исчезать после нажатия кнопки или вкладки в текстовое поле.
- исключение: Если текстовое поле имеет фокус ввода по умолчанию, отображается запрос, и он исчезает после того, как пользователь начнет вводить текст.
Текст запроса восстанавливается, если текстовое поле по-прежнему пусто при потере фокуса ввода.

Метки

Метки текстового поля

Все текстовые поля нуждаются в метках. Напишите метку как слово или фразу, а не как предложение, заканчивая двоеточием и используя статический текст.

Исключения :
- Текстовые поля с запросами, расположенными где пространство находится в категории "Премиум".
- Для маркировки группа текстовых полей, используемых для форматированных входных данных, должна рассматриваться как одно текстовое поле.
- Если текстовое поле подчинено переключателю или флажку, и оно представлено его меткой, заканчивающейся двоеточием, не помещайте дополнительную метку в текстовое поле.
- Опустить метки элементов управления, которые перенастраивает основную инструкцию. В этом случае основная инструкция принимает двоеточие (если это не вопрос) и ключ доступа.
  
  Допустимо:
  
  В этом примере метка текстового поля — это просто перезапись основной инструкции.
  
  Лучше:
  
  В этом примере удалена избыточность метки, поэтому основная инструкция принимает двоеточие и ключ доступа.
Назначьте уникальный ключ доступа. Рекомендации по назначению ключей доступа см. в клавиатуры.
Используйте прописную букву в стиле предложений.
Поместите метку слева или над текстовым полем и выровняйте метку слева от текстового поля. Если метка находится слева, по вертикали выровняйте текст метки с текстом текстового поля.

правильно:

В этих примерах метка сверху выравнивается с левым краем текстового поля, а метка слева выравнивается с текстом в текстовом поле.

неправильно:

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

снимок экрана

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

В этом примере разделитель элементов указан в метке.
Рекомендации по указанию необходимых входных данных см. в разделе "Обязательные входные данные" в диалоговых окнах .

Метки инструкций

Если необходимо добавить инструкционный текст о текстовом поле, добавьте его над меткой. Используйте полные предложения с окончанием препинания.
Используйте прописную букву в стиле предложений.
Дополнительные сведения, полезные, но не необходимые, должны быть короткими. Поместите эти сведения в скобки между меткой и двоеточием или без скобок под текстовым полем.

снимок экрана

В этом примере дополнительные сведения помещаются под текстовым полем.

Метки запроса

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

Документация

При обращении к текстовым полям:

Используйте тип для ссылки на взаимодействие с пользователем, для которых требуется ввод или вставка; в противном случае используйте ввод, если пользователи могут поместить информацию в текстовое поле с помощью других средств, например выбрать значение из списка или кнопку "Обзор".
Используйте выбор, чтобы ссылаться на запись в текстовом поле только для чтения.
Используйте точный текст метки, включая его заглавную букву, и включите поле слова. Не включайте символ подчеркивания или двоеточия ключа доступа. Не ссылайтесь на текстовое поле как текстовое поле или поле.
По возможности отформатируйте метку с помощью полужирного текста. В противном случае поместите метку в кавычки, только если это необходимо, чтобы предотвратить путаницу.

Пример. Введите пароль в поле пароля и нажмите кнопку ОК.
Если текстовое поле требует определенного формата, документ используется только наиболее часто используемый формат. Пусть пользователи могут самостоятельно обнаруживать другие форматы. Вы хотите быть гибким с форматами данных, но это не должно привести к сложной документации.

правильно:

Введите серийный номер части с помощью формата 1234-56-7890.

неправильно:

Введите серийный номер части с помощью любого из следующих форматов:

1234567890

1234-56-7890

1234 56 7890

Поделиться через