как называется поле для ввода текста

Как называется поле для ввода текста

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

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

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Зачем Вы изучаете программирование/создание сайтов?

Создание мультиплеерной игры на Unreal Engine 4

В этом курсе Вы увидите пример создания мультиплеерной игры на Unreal Engine 4: создание персонажа, HUD, атака, блокировка, главное меню и многое другое.

Чтобы получить Видеокурс,
заполните форму

Как создать профессиональный Интернет-магазин

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Источник

Поле ввода Input

Поле ввода дает возможность указать значение с помощью клавиатуры.

Когда использовать

Используйте поле ввода для коротких текстовых или цифровых значений без предсказуемого формата.

Если нужно ввести больше 5 слов — используйте многострочное поле ввода.

Если вводимое значение имеет определенный формат, используйте специальную версию поля:

В HTML5 поле ввода может быть разных типов — color, date, email, password, text, url и т.д. В сервисах Контура используйте только типы text и password. Остальные типы либо не поддерживаются основными браузерами, либо предлагают плохой пользовательский интерфейс и валидацию, которая будет отличаться по дизайну от нашей.

Название

Название поля пишется с заглавной буквы.

Называйте поле ввода существительным, указывающим что нужно ввести. Избегайте в названии слов «ваш», «введите» и подобных — они не несут смысла.

Не ставьте двоеточие после названия: без него все понятно, оно только создает лишний визуальный шум.

Описание работы

Плейсхолдер

Если из названия не очевидно, как заполнять поле, используйте плейсхолдер – подсказку, которая отображается внутри поля, пока оно не заполнено.

Плейсхолдер (от английского placeholder) — местозаполнитель. Часто используют синоним «ватермарк», но плейсхолдер — более правильное название, т.к. совпадает с соответствующим атрибутом тегов input и textarea.

При получении полем фокуса плейсхолдер становится светлее, при вводе первого символа исчезает.

Плейсхолдер не должен подсказывать конкретное значение, которое нужно ввести в поле.

Если поле вычисляемое и вы рассчитали значение — используйте автополе:

Если вы предполагаете значение — предзаполните поле, пользователь сможет его отредактировать:

Не используйте плейсхолдер для указания формата структурированных значений. Для этого есть поле с маской.

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

Не используйте плейсхолдер для указания названий полей во всей форме. В заполненном состоянии такая форма становится «слепой»:

Очистка поля

Если пользователю нужно часто очищать поле и вводить новое значение — используйте для этого специальную кнопку-крестик.

Крестик показывается, когда в поле введен хотя бы 1 символ. Крестик показывается даже когда фокус находится вне поля.

При клике на крестик фокус переходит в поле, введенное значение стирается:

Для иконки используется символ из шрифта Kontur Iconic. При наведении иконка становится темнее:

Область для нажатия по высоте равна полю ввода, по ширине 28 px:

Internet Explorer 10 рисует свой крестик для любого поля ввода в фокусе. Чтобы этот крестик не перекрывал нашу иконку, нужно дописать стиль:

Счетчик количества введенных символов

Счетчик введенных символов в обычном инпуте работает так же, как и в многострочном поле. Располагается справа, на той же строке, что и вводимый текст:

Не реализовано в библиотеке React UI — #2208

Смотрите подробное описание работы счетчика в гайде по многострочному полю.

Размер и расположение

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

Название поля должно выравниваться по базовой линии текста в поле:

Название поля в несколько строк должно выравниваться по базовой линии первой строки:

В многострочном поле название должно выравниваться по базовой линии первой строки введенного в поле текста:

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

В рамках одной формы нужно выбрать 3-4 ширины для полей. Так форма выглядит проще и аккуратнее.

Фокус и работа с клавиатурой

При клике по полю и при переходе табом поле выглядит одинаково: появляется синяя рамка, которая сохраняется до потери фокуса.

Cиняя рамка фокуса не появляется если поле находится в состоянии ошибки или предупреждения, до тех пор пока значение в поле не будет изменено.

Допустимо переносить фокус на следующее поле при нажатии клавиши Enter в поле — иногда такое поведение удобно и интуитивно понятно для пользователя. Если поле последнее в форме, переход фокуса по Enter не должен происходить на кнопку отправки формы.

Валидация

Поле с ошибкой подсвечивается красной рамкой.

О поведении полей ввода с ошибками читайте в гайде по валидации.

Дизайн

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

Источник

Шкатулка с секретами. Поля ввода

Это первая статья об элементах интерфейса из серии под названием «Шкатулка с секретами». Она посвящена очень простому на первый взгляд элементу, который есть практически на любом сайте и в любом приложении. Он — основа для получения обратной реакции от пользователя. То, как он сделан, сильно влияет на пользовательский опыт. Этот компонент — поле ввода.

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

Начнем с определения

Input (поле ввода) — базовый компонент интерфейса, предназначенный для ввода небольшого объема текста.

Самое простое поле ввода содержит Label (лейбл или заголовок) и Text field (область для ввода текста). Чтобы пользователям было удобнее работать с полем ввода, базовый комплект может быть сильно расширен — об этом расскажу ниже.

Состав

Поле ввода — простой компонент, но он состоит из множества частей. Даже в базовом состоянии вам нужно будет определиться с:

Эти части создают единое целое, они задают ритм и задействуют все базовые элементы стиля.

Cостояния

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

Базовое активное состояние поля ввода, когда пользователь с ним не взаимодействует, но может сделать это в любой момент.

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

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

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

Состояние, которое показывает, что текст поля не проходит по требованиям и его нельзя отправить. Ошибки возникают, когда поле валидируется — проверяется, что все новые данные отвечают требованиям.

Если возникла ошибка, поле ввода должно среагировать на это событие — чаще всего обводка области ввода становится красной. Может измениться и заливка: например, стать розовой. Рядом с полем ввода появляется сообщение для пользователя: так он понимает, что произошло и как исправить ошибку.

Про доступность

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

Что стоит учитывать дизайнерам:

Документация для поля ввода

С этими знаниями вы сможете грамотно подготовить компонент. Ваша документация должна содержать все необходимые состояния для передачи в разработку.

Дополнительные компоненты в поле ввода

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

Пример заполнения (placeholder)

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

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

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

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

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

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

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

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

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

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

Браузерные дополнения

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

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

На картинке выше показаны примеры одного и того же поля ввода в разных операционных системах и браузерах.

Если в вашем поле ввода уже есть иконка, но для поля установлено назначение, то вы можете наблюдать разные интересные ситуации, например, дублирование.

Источник

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

Элемент управления TextBox позволяет пользователю вводить текст в приложение. Обычно он используется для записи одной строки текста. Но элемент можно настроить и для записи нескольких строк. Текст отображается на экране в простом унифицированном формате обычного текста.

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

Получение библиотеки пользовательского интерфейса Windows

Библиотека пользовательского интерфейса Windows 2.2 или более поздних версий содержит новый шаблон для этого элемента управления, который использует закругленные углы. Дополнительные сведения см. в разделе о радиусе угла. WinUI — это пакет NuGet, содержащий новые элементы управления и функции пользовательского интерфейса для приложений для Windows. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows.

Выбор правильного элемента управления

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

Вы можете сделать элемент TextBox предназначенным только для чтения. Но это должно быть временным, условным состоянием. Если текст не редактируется, попробуйте использовать элемент TextBlock.

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

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

Элемент RichEditBox служит для отображения и правки текстовых файлов.

Дополнительные сведения можно найти в статье об элементах управления текстом.

Примеры

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

Создание текстового поля

Вот код XAML для простого текстового поля с заголовком и замещающим текстом.

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

Использование текстового поля для ввода данных в форму

Текстовое поле часто используется, чтобы принять ввод данных в форму и получить полную текстовую строку из текстового поля с помощью свойства Text. Обычно доступ к свойству Text осуществляется в таких событиях, как нажатие кнопки «Отправить». Но вы можете использовать событие TextChanged или TextChanging, если нужно выполнить какие-либо действия сразу при изменении текста.

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

К текстовому полю можно добавить Header (или метку) и PlaceholderText (или водяной знак), чтобы пользователь понимал, для чего оно используется. Чтобы настроить оформление заголовка, задайте свойство HeaderTemplate вместо Header. Сведения о проектировании см. в руководстве по использованию меток.

Вы можете ограничить число вводимых пользователем символов, настроив свойство MaxLength. Но свойство MaxLength не ограничивает длину вставленного текста. Используйте событие Paste, чтобы изменить вставленный текст, если это важно для вашего приложения.

В текстовом поле есть кнопка «Очистить все» («X»), которая появляется при введении текста в поле. Когда пользователь нажимает кнопку «X», текст в поле удаляется. Это выглядит следующим образом:

Кнопка «Очистить все» отображается только для редактируемых однострочных текстовых полей, которые содержат текст и имеют фокус.

Кнопка «Очистить все» не отображается в любом из перечисленных ниже случаев.

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

Текст, предназначенный только для чтения

Текстовое поле можно сделать доступным только для чтения, присвоив свойству IsReadOnly значение true. Обычно вы переключаете это свойство в приложении, исходя из условий в приложении. Если вам нужен текст, который всегда предназначен только для чтения, воспользуйтесь элементом TextBlock.

Объект TextBox можно сделать доступным только для чтения, присвоив свойству IsReadOnly значение true. Например, у вас может быть элемент TextBox для пользовательских комментариев, который включается только при определенных условиях. Элемент TextBox можно сделать предназначенным только для чтения, пока не будут выполняться эти условия. Если вам нужно только отобразить текст, воспользуйтесь элементом TextBlock или RichTextBlock.

Текстовое поле, предназначенное только для чтения, ничем не отличается от текстового поля, предназначенного для чтения и записи. Поэтому пользователь может растеряться. Пользователь может выделять и копировать текст. IsEnabled

Включение многострочного ввода

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

Примечание. Элементы TextBox и RichEditBox не поддерживают значение WrapWholeWords для своих свойств TextWrapping. Если попытаться указать WrapWholeWords в качестве значения для параметра TextBox.TextWrapping или RichEditBox.TextWrapping, отобразится исключение с сообщением о недействительном аргументе.

Многострочное текстовое поле будет постоянно увеличиваться по вертикали по мере ввода текста, если нет ограничений в свойстве Height, MaxHeight или родительском контейнере. Следите за тем, чтобы многострочное текстовое поле не выходило за пределы видимой зоны. Если это произошло, ограничьте его увеличение. Мы рекомендуем всегда указывать целесообразную высоту для многострочного текстового поля и не позволять ему увеличиваться в высоту во время ввода текста пользователем.

Прокрутка с помощью колесика прокрутки или пальца включается автоматически по мере необходимости. Но вертикальные полосы прокрутки не отображаются по умолчанию. Вы можете отобразить вертикальные полосы прокрутки, установив для параметра ScrollViewer.VerticalScrollBarVisibility значение Auto для встроенного класса ScrollViewer, как показано здесь.

Вот как выглядит текстовое поле после добавления текста.

Форматирование отображаемого текста

Используйте свойство TextAlignment для выравнивания текста в текстовом поле. Чтобы выровнять текстовое поле в рамках макета страницы, используйте свойства HorizontalAlignment и VerticalAlignment.

Хотя текстовое поле поддерживает только неформатированный текст, вы можете настроить отображение текста в текстовом поле в соответствии с фирменным оформлением. Можно задать стандартные свойства Control, например, FontFamily, FontSize, FontStyle, Background, Foreground и CharacterSpacing, чтобы изменить внешний вид текста. Эти свойства влияют только на то, как текстовое поле отображает текст локально. Например, если скопировать и вставить текст в элемент управления для форматированного текста, форматирование не будет применено.

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

Созданное текстовое поле выглядит следующим образом:

Изменение контекстного меню

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

Чтобы изменить команды, отображаемые в контекстном меню, обрабатывайте событие ContextMenuOpening. См. пример такой обработки с добавлением свойства Share в поле CommandBarFlyout элемента управления RichEditBox в коллекции элементов управления XAML. Сведения о проектировании см. в руководстве по контекстным меню.

Выделение, копирование и вставка

Получить выбранный текст из текстового поля или задать его можно с помощью свойства SelectedText. Чтобы управлять выделением текста, используйте свойства SelectionStart и SelectionLength, а также методы Select и SelectAll. Событие SelectionChanged позволяет выполнять действия, пока пользователь выбирает или отменяет выбор текста. Вы можете изменить цвет, используемый для выделения выбранного текста, настроив свойство SelectionHighlightColor.

Элемент TextBox поддерживает копирование и вставку по умолчанию. Вы можете реализовать в приложении пользовательскую обработку события Paste в редактируемых текстовых элементах управления. Например, можно удалить разрывы строк из многострочного адреса при вставке в однострочное поле поиска. Или вы можете проверить длину вставленного текста и предупредить пользователя, если превышает максимальную длину текста, который можно сохранить в базе данных. Дополнительные сведения и примеры см. в статье о событии Paste.

Ниже приведен пример применяемых для этого свойств и методов. При выборе текста в первом текстовом поле выбранный текст отображается во втором текстовом поле, которое доступно только для чтения. Значения свойств SelectionLength и SelectionStart отображаются в двух текстовых блоках. Для этого используется событие SelectionChanged.

Вот результат выполнения этого кода.

Выбор подходящей клавиатуры для элемента управления текстом

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

Сенсорная клавиатура позволяет вводить текст, если приложение выполняется на устройстве с сенсорным экраном. Сенсорная клавиатура появляется, когда пользователь касается редактируемого поля ввода, например, TextBox или RichEditBox. Пользователи смогут вводить данные в вашем приложении гораздо быстрее и с меньшими усилиями, если вы настроите тип вводимых данных элемента управления текстом в соответствии с типом вводимых данных. Тип вводимых данных предоставляет системе подсказку о типе текстового ввода, ожидаемого элементом управления. Благодаря этому система может отобразить специальную раскладку сенсорной клавиатуры в соответствии с используемым типом ввода.

Например, если текстовое поле используется только для ввода 4-значного PIN-кода, установите для свойства InputScope значение Number. Это сообщает системе, что нужно отобразить раскладку цифровой клавиатуры, благодаря чему пользователю проще вводить PIN-код.

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

Другие свойства, влияющие на сенсорную клавиатуру: IsSpellCheckEnabled, IsTextPredictionEnabled и PreventKeyboardDisplayOnProgrammaticFocus. (IsSpellCheckEnabled также влияет на элемент TextBox при использовании аппаратной клавиатуры.)

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

Рекомендации

Поля ввода из одной строки

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

Делайте однострочные текстовые поля немного шире предполагаемого текста. Если элемент управления получится слишком широким, разделите его на два элемента. Например, можно разделить однострочное поле адреса на «Адрес, строка 1» и «Адрес, строка 2».

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

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

В следующем примере показано текстовое поле для записи ответа на вопрос безопасности. Так как предполагается краткий ответ, то здесь вполне подходит поле, состоящее из одной строки.

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

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

Элементы управления для ввода многострочного текста

При создании текстового поля в формате RTF следует предусмотреть кнопки стиля и реализовать их действия.

Используйте шрифт, соответствующий стилю вашего приложения.

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

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

При вводе пользователем текста элементы управления не должны увеличиваться по высоте.

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

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

Источник