поле ввода на английском
поле ввода
1 поле ввода
2 поле ввода
Тематики
3 поле ввода
4 поле ввода
5 поле необязательного ввода
6 поле обязательного ввода
7 поле рукописного ввода
См. также в других словарях:
поле ввода — — [http://www.iks media.ru/glossary/index.html?glossid=2400324] Тематики информационные технологии в целом EN boxinput field … Справочник технического переводчика
поле ввода значения параметра — — [http://www.iks media.ru/glossary/index.html?glossid=2400324] Тематики информационные технологии в целом EN parameter value input field … Справочник технического переводчика
поле — сущ., с., употр. очень часто Морфология: (нет) чего? поля, чему? полю, (вижу) что? поле, чем? полем, о чём? о поле; мн. что? поля, (нет) чего? полей, чему? полям, (вижу) что? поля, чем? полями, о чём? о полях 1. Полем называют ровную обширную… … Толковый словарь Дмитриева
Поле адаптации — 1. Часть области полезной нагрузки пакетов транспортного потока, которая служит для ввода управляющих и вспомогательных сигналов, передаваемых не в каждом пакете Употребляется в документе: ГОСТ Р 52591 2006 Система передачи данных пользователя в… … Телекоммуникационный словарь
Операция «Чистое поле» — Война в Южной Осетии 2008 года, Пятидневная война Грузино южноосетинский конфликт Грузино абхазский конфликт Дата 7 августа … Википедия
текстовое поле — символьное поле Поле в документе или издании, предназначенное для ввода текстовой информации. [http://www.morepc.ru/dict/] Тематики информационные технологии в целом Синонимы символьное поле EN character field … Справочник технического переводчика
Список кодов состояния HTTP — HTTP Постоянное соединение · Сжатие · HTTPS Методы OPTIONS · GET · HEAD · POST · PUT · DELETE · TRACE · CONNECT · PATCH Заголовки Cookie · ETag · Location · Referer DNT · X Forwarded For … Википедия
Возможности браузера Opera — Содержание 1 Отображение страниц 1.1 Масштаб страницы … Википедия
Speed dial — Содержание 1 Отображение страниц 1.1 Масштаб страницы 1.2 Подогнать по ширине 1.3 … Википедия
Достоинства браузера Opera — Содержание 1 Отображение страниц 1.1 Масштаб страницы 1.2 Подогнать по ширине 1.3 … Википедия
поле ввода
1 input field
2 entry field
3 input field
4 input box
5 input field
6 manual input field
7 manual input field
8 handwriting edit control
9 hedit control
См. также в других словарях:
поле ввода — — [http://www.iks media.ru/glossary/index.html?glossid=2400324] Тематики информационные технологии в целом EN boxinput field … Справочник технического переводчика
поле ввода значения параметра — — [http://www.iks media.ru/glossary/index.html?glossid=2400324] Тематики информационные технологии в целом EN parameter value input field … Справочник технического переводчика
поле — сущ., с., употр. очень часто Морфология: (нет) чего? поля, чему? полю, (вижу) что? поле, чем? полем, о чём? о поле; мн. что? поля, (нет) чего? полей, чему? полям, (вижу) что? поля, чем? полями, о чём? о полях 1. Полем называют ровную обширную… … Толковый словарь Дмитриева
Поле адаптации — 1. Часть области полезной нагрузки пакетов транспортного потока, которая служит для ввода управляющих и вспомогательных сигналов, передаваемых не в каждом пакете Употребляется в документе: ГОСТ Р 52591 2006 Система передачи данных пользователя в… … Телекоммуникационный словарь
Операция «Чистое поле» — Война в Южной Осетии 2008 года, Пятидневная война Грузино южноосетинский конфликт Грузино абхазский конфликт Дата 7 августа … Википедия
текстовое поле — символьное поле Поле в документе или издании, предназначенное для ввода текстовой информации. [http://www.morepc.ru/dict/] Тематики информационные технологии в целом Синонимы символьное поле EN character field … Справочник технического переводчика
Список кодов состояния HTTP — HTTP Постоянное соединение · Сжатие · HTTPS Методы OPTIONS · GET · HEAD · POST · PUT · DELETE · TRACE · CONNECT · PATCH Заголовки Cookie · ETag · Location · Referer DNT · X Forwarded For … Википедия
Возможности браузера Opera — Содержание 1 Отображение страниц 1.1 Масштаб страницы … Википедия
Speed dial — Содержание 1 Отображение страниц 1.1 Масштаб страницы 1.2 Подогнать по ширине 1.3 … Википедия
Достоинства браузера Opera — Содержание 1 Отображение страниц 1.1 Масштаб страницы 1.2 Подогнать по ширине 1.3 … Википедия
Поле ввода на английском
Откройте возможности нейронного машинного перевода PROMT
PROMT.One (www.translate.ru) – бесплатный онлайн-переводчик на основе нейронных сетей (NMT) для азербайджанского, английского, арабского, греческого, иврита, испанского, итальянского, казахского, китайского, корейского, немецкого, португальского, русского, татарского, турецкого, туркменского, узбекского, украинского, финского, французского, эстонского и японского языков.
Изучайте времена и формы глаголов в английском, немецком, испанском, французском и русском языках в разделе Спряжение и склонение. Учите употребление слов и выражений в разных Контекстах. Мы собрали для вас миллионы примеров перевода на разные языки, которые помогут вам в изучении иностранных языков и подготовке домашних заданий.
Переводите в любом месте и в любое время с помощью мобильного переводчика PROMT.One для iOS и Android. Попробуйте голосовой и фотоперевод, скачайте языковые пакеты для офлайн-перевода.
Поделиться переводом
Ваш текст переведен частично.
Вы можете переводить не более 999 символов за один раз.
Войдите или зарегистрируйтесь бесплатно на PROMT.One и переводите еще больше!
Добавить в избранное
Для добавления в Избранное необходимо авторизоваться
Шкатулка с секретами. Поля ввода
Это первая статья об элементах интерфейса из серии под названием «Шкатулка с секретами». Она посвящена очень простому на первый взгляд элементу, который есть практически на любом сайте и в любом приложении. Он — основа для получения обратной реакции от пользователя. То, как он сделан, сильно влияет на пользовательский опыт. Этот компонент — поле ввода.
Зачем я пишу эту статью? В процессе работы над интерфейсами я пыталась найти информацию о полях ввода и поняла, что это задача не из простых: информации крайне мало, она разбросана по источникам и почти не переведена на русский язык. Поэтому я решила, что такая статья точно будет полезной другим дизайнерам. Она отражает не только мой опыт, но и опыт моей любимой команды.
Начнем с определения
Input (поле ввода) — базовый компонент интерфейса, предназначенный для ввода небольшого объема текста.
Самое простое поле ввода содержит Label (лейбл или заголовок) и Text field (область для ввода текста). Чтобы пользователям было удобнее работать с полем ввода, базовый комплект может быть сильно расширен — об этом расскажу ниже.
Состав
Поле ввода — простой компонент, но он состоит из множества частей. Даже в базовом состоянии вам нужно будет определиться с:
Эти части создают единое целое, они задают ритм и задействуют все базовые элементы стиля.
Cостояния
На мой взгляд, самое важное при создании поля ввода — продумать все необходимые состояния. Об этом часто забывают: возможно, потому что знания о таких вещах доходят обрывками.
Базовое активное состояние поля ввода, когда пользователь с ним не взаимодействует, но может сделать это в любой момент.
Нужно только для веб-интерфейсов, где есть мышь или тачпад. Поле ввода может визуально реагировать на это событие. Например, немного менять цвет обводки в области для ввода текста.
Это активное состояние поля ввода, когда пользователь с ним взаимодействует — заполняет данные. Фокус появится, если нажать на поле ввода или переключиться на него с помощью клавиатуры. По умолчанию в браузере уже встроен дизайн состояния фокуса, но его можно изменить.
Неактивное состояние, когда пользователь не может взаимодействовать с полем. Чаще всего у неактивного поля снижен контраст, а область ввода залита серым.
Состояние, которое показывает, что текст поля не проходит по требованиям и его нельзя отправить. Ошибки возникают, когда поле валидируется — проверяется, что все новые данные отвечают требованиям.
Если возникла ошибка, поле ввода должно среагировать на это событие — чаще всего обводка области ввода становится красной. Может измениться и заливка: например, стать розовой. Рядом с полем ввода появляется сообщение для пользователя: так он понимает, что произошло и как исправить ошибку.
Про доступность
Создавая доступный интерфейс, вы заботитесь о том, чтобы им мог пользоваться любой человек — независимо от того, какие у него особенности.
Что стоит учитывать дизайнерам:
Документация для поля ввода
С этими знаниями вы сможете грамотно подготовить компонент. Ваша документация должна содержать все необходимые состояния для передачи в разработку.
Дополнительные компоненты в поле ввода
Кроме базовых элементов, о которых я говорила в начале статьи, у поля ввода может быть большое количество вспомогательных. В статье я не могу охватить все, но постараюсь рассказать о самых распространенных и полезных.
Пример заполнения (placeholder)
Предзаполненный текст внутри поля ввода показывает, что можно написать. Этот текст пропадает при начале ввода, поэтому его нельзя (даже если очень хочется) использовать вместо лейбла.
Дополнительная текстовая строка — самый частый спутник поля ввода. Используется, если нужно дать пользователю больше информации.
Подсказки могут быть примитивными или более сложными по структуре. Сложные варианты встречаются при создании логина или пароля, когда надо учесть много условий: например, может появиться шкала сложности и надежности пароля.
Текстовый скелет, который помогает людям понять, в каком формате вводить данные. Часто маску можно встретить на полях для ввода даты, номера карты или телефона. Маска может самостоятельно ставить пробелы, точки или другие символы, чтобы упростить и ускорить процесс заполнения.
Чаще всего защиту делают в виде иконки глаза, при клике на который можно скрыть или показать заполненные данные. Такая иконка почти всегда есть около поля с вводом пароля.
Технология автозаполнения поисковой строки работает по статистике самых популярных запросов. Это очень распространенное дополнение, поэтому его можно встретить на сайте любого поисковика. Варианты подтягиваются из базы данных вертикальным списком — пользователь может выбрать что-то из этого списка, а может и не выбирать. После клика на любой пункт открывается новая страница.
Очень похоже на саджест, так как по сути у них одна цель. В отличие от саджеста, автозаполнение просто заполняет строку текстом. Показательный пример — автоматическое заполнение полного адреса, когда человек ввел только одну основную часть.
Есть случаи, когда саджест и автозаполнение применяются одновременно.
В этой ситуации при клике на словосочетание откроется новая страница — сработает саджест. Если кликнуть на иконку справа, поле ввода автоматически заполнится — сработает автокомплит.
Есть и другие дополнительные опции для полей ввода: например, виртуальная клавиатура или возможность голосового ввода. Они применяются редко, но бывают крайне полезны в определенных обстоятельствах.
Браузерные дополнения
Браузеры научились помогать людям быстрее и проще взаимодействовать с полями ввода. Они могут добавлять различные дополнительные элементы управления внутрь поля. Важно помнить об этом, потому что такие дополнения могут влиять на размер поля ввода и перекрывать его элементы.
Это зависит от конкретного браузера и даже от его версии. Когда frontend-разработчик делает поле ввода, он может задать ему определенное назначение. Полный список элементов можно посмотреть тут. Есть поля, предназначенные для пароля, даты, телефона, цифр и прочего. Все браузеры реагируют на поля ввода по-разному, внешний вид этих вспомогательных элементов от вас не зависит — только от операционной системы и браузера. В некоторых браузерах на эти элементы можно влиять, в других — нет.
На картинке выше показаны примеры одного и того же поля ввода в разных операционных системах и браузерах.
Если в вашем поле ввода уже есть иконка, но для поля установлено назначение, то вы можете наблюдать разные интересные ситуации, например, дублирование.