элемент управления поле ввода предназначен для
Поле ввода
Элемент управления «Поле ввода» предназначен для ввода текстовой строки или числа с клавиатуры в графическом интерфейсе. Введенное значение передается в контроллер в соответствующее поле структуры RemoteXY. Поле ввода поддерживает ввод произвольного текста, ввод целого числа, ввод вещественного числа.
Структура данных
| Данные | Тип | Значение |
| Для произвольного текста | ||
| Введенная строка | char[x] | Введенная текстовая строка UTF8 оканчивающаяся нулем, под строку выделено x байт |
| Для вещественного числа | ||
| Введенное число | float (32 бит) | Введенное значение числа |
| Для целого числа | ||
| Введенное число | int16_t (16 бит) | Введенное значение числа |
Описание
Элемент управления «Поле ввода» позволяет ввести произвольную текстовую информацию или числовую информацию с экрана графического интерфейса. Поле ввода поддерживает три режима работы: ввод текста, ввод целого числа, ввод вещественного числа с плавающей точкой.
При вводе текста количество байт, выделяемых под строку задается в свойствах элемента. Используется кодировка UTF8, по этому необходимо учитывать, что под некоторые символы выделяется по 2 байта на символ.
При вводе вещественного числа необходимо указать количество разрядов после запятой, отображаемых в поле ввода.
Поддержка типа вводимого значения так же осуществляется на этапе ввода значения путем предоставления пользователю соответствующей клавиатуры для ввода. Поле ввода может содержать кнопку очистки введенного значения. Поддерживается центрирование введенного текста влево, вправо и по центру.
Свойства элемента
| Свойство | Значение |
| Имя переменной | Имя переменной в структуре RemoteXY по правилам языка C++ |
| Цвет | Цвет поля ввода |
| Тип вводимых данных | Определяет тип вводимых данных. Доступные значения: текстовая строка, вещественное число, целое число. |
| Символов | Количество байт, выделяемых под строку. Система автоматически добавит 1 байт для завершающего нуля. Свойство задается только для текстовой строки. Необходимо учитывать, что в кодировке UTF8 некоторые символы занимают 2 байта. |
| Десятичных знаков | Количество знаков после запятой, отображаемых в поле ввода. Свойство задается только для вещественных чисел. |
| Выравнивание | Горизонтальное выравнивание введенного текста. Доступные значения: слева, центр, справа. |
| Показывать фон | Признак отображения фона поля ввода. |
| Кнопка очистки | Признак отображения кнопки очистки поля ввода. |
Примеры программирования Arduino IDE
Для проверки введенного в поле ввода текста на соответствие определенной строке, можно использовать следующий код:
if (strcmp (RemoteXY.edit_1, «OK»)==0) <
// TODO entered “OK”
Пример, как преобразовать введенную строку в числовой тип данных, в случае если для ввода данных используется произвольный текст:
Элементы управления формы 1С
Элементы управления — это объекты формы, определяющие визуальное представление формы и предназначенные для интерактивного взаимодействия с пользователем (например, кнопки, флажки, поля ввода и т.д., визуальное объединение «элементарных» элементов управления).
Поведение каждого типа элементов управления по умолчанию задано платформой, однако может корректироваться разработчиком.
Для обычных форм элементы управления настраиваются только конфигуратором, а для управляемых возможны определенные корректировки элементов в режиме 1С:Предприятие.
В элементах управления данные не хранятся!
Разделители являются специальными элементами, с помощью которых возможно перераспределение пространства формы без изменения ее размеров.
Платформа в режиме 1С:Предприятие для управляемых форм самостоятельно добавляет эти элементы в форму.
При построении обычных форм используются вертикальные и горизонтальные разделители.
Элемент управления Разделитель позволяет пользователю менять пространство формы, сдвигая ее части. Разделитель может быть как с отображением, так и невидимый.
Наличие разделителя должно интуитивно угадываться при работе с формой, поэтому ближайшие от разделителя по направлениям его передвижения элементы управления размещаются вплотную к нему, таким образом визуально предполагая его расположение:
Разделитель обладает способностью «захватываться» мышью и перемещаться внутри формы в ее пределах с учетом возможности расположения других элементов и ориентации разделителя.
Таким образом, элемент управления «Разделитель» позволяет перераспределять внутреннее пространство формы, изменяя размеры расположенных в ней элементов управления, привязанных к разделителю. Размеры самой формы при этом не меняются.
Команды формы редактируются в списке. Разработчик имеет возможность:
Для добавления команды в виде кнопки:
На закладках «Стандартные команды» и «Глобальные команды» разработчику предоставляются списки команд, генерируемых платформой и доступных для использования в данной форме. Их свойства изменять нельзя, можно только добавлять их в форму.
С помощью мыши разработчик может перетащить команду в командный интерфейс формы (платформа автоматически нарисует кнопку). Также можно перетащить команду и прямо в дерево элементов, если нужно, например, отобразить эту команду в виде кнопки, расположенной в форме (платформа автоматически нарисует кнопку).
Для кнопки можно определить процедуру-обработчик для события «Нажатие»; тем самым кнопка программируется для выполнения некого стандартного действия:
В качестве обработчика события «Нажатие» элемента управления «Кнопка» может быть выбрано:
Глобальную процедуру инициировать напрямую по кнопке нельзя.
Поясняющая информация на элементе управления «Кнопка» может быть представлена в виде:
Комплект вопросов сертификационного экзамена на знание основных механизмов платформы «1С: Предприятие 8» (стр. 28 )
 | Из за большого объема этот материал размещен на нескольких страницах: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
10.58 Каким образом для элемента управления «Командная панель» реализовать возможность его автоматического заполнения?
1. В окне свойств достаточно установить флаг «Изменяет данные»
2. В окне свойств достаточно установить флаг «Автозаполнение»
3. В окне свойств установить флаг «Изменяет данные» и, обязательно, выбрать значение свойства «Источник действий»
4. В окне свойств установить флаг «Автозаполнение» и, обязательно, выбрать значение свойства «Источник действий»
10.59 В конфигурацию добавлен новый справочник «Договора», подчиненный справочнику «Контрагенты». Каким образом, в режиме Конфигуратора, необходимо модернизировать основные формы списка и элемента справочника «Контрагенты», чтобы для конкретного контрагента имелась возможность просмотреть его договора? Каждая из форм имеет автоматически заполняемую командную панель.
1. В командную панель каждой из форм необходимо вставить кнопку, для обработчика события «Нажатие» которой выбрать стандартное действие «Открыть подчиненный справочник»
2. В командную панель каждой из форм необходимо вставить кнопку, для которой добавить в модуль формы обработчик события «Нажатие»
3. Ничего делать не надо, в командную панель автоматически будет добавлена кнопка «Перейти», позволяющая открыть форму подчиненного справочника
4. Верны ответы 1 и 2
10.60 Свойство «Вспомогательная» элемента управления «Командная панель» предназначено:
1. Для расположения кнопок с командами, дополняющими команды основной панели формы
2. Для исключения командной панели из порядка обхода элементов управления в форме
3. Для расположения кнопок с командами, относящимися к элементам управления формы, а не к самой форме
10.61 Элемент управления «Поле табличного документа» предназначен для размещения в форме:
1. Данных в виде динамических списков
2. Табличного документа
3. Верпы ответы 1 и 2
10.62 Элемент управления «Табличное поле» предназначен для размещения в форме:
1. Данных в виде динамических списков
3. Статических данных
4. Верны ответы 1 и 3
5. Верны ответы 2 и 3
10.63 Данные в элементе управления «Табличное поле» могут быть отображены:
3. Верны ответы 1 и 2
10.64 Можно ли одновременно создать элемент управления «Поле ввода» вместе с поясняющей надписью, представляющей элемент управления «Надпись»?
1. Нет, нельзя, так как это разные элементы управления
2. Можно, для этого необходимо создавать ноле ввода через пункт главного меню «Форма-Вставить элемент управления. «
3. Можно, для этого необходимо создавать поле ввода, воспользовавшись одноименной кнопкой на панели инструментов «Элементы управления»
10.65 Элемент управления «Поле ввода» предназначен для:
1. Ввода значений непосредственно в поле, например, с клавиатуры
2. Выбора ссылок на объекты
3. Выбора значений из предварительно сформированного списка
4. Верны ответы 1, 2 и 3
5. Верны ответы 1 и 2
10.66 Тонкая прерывистая линия красного цвета в поле ввода контрагента означает:
1. Данное иоле недоступно для заполнения
2. Данное поле обязательно к заполнению
3. У данного ноля создан обработчик события «ПроверкаЗаполнения
4. У данного поля определен один (или более) обработчик события
10.67 Если в качестве типа значения для элемента управления «Поле ввода» выбрано «СправочникСсылка. Номенклатура», то можно ли организовать быстрый выбор значения этого поля, набирая название конкретной позиции номенклатуры непосредственно в самом поле ввода?
2. Можно. Для этого необходимо выбрать свойство поля ввода «Автовыбор незаполненного»
3. Можно. Для этого необходимо выбрать свойство поля ввода «Быстрый выбор»
4. Можно. Для этого необходимо в окне редактирования справочника «Номенклатура» на закладке «Формы» в поле «Ввод по строке» выбрать «Наименование»
10.68 Состав кнопок, расположенных справа у элемента управления «Попе ввода», определяется:
1. Значением свойства поля ввода «Тип значения»
2. Выбором соответствующего свойства в окне свойств элемента управления
4. Верны ответы 1 и 2
5. Верны ответы 1, 2 и 3
10.69 Какую кнопку необходимо создать у элемента управления «Поле ввода», чтобы для выбора значения можно было использовать выпадающий список?
1. Кнопку списка выбора
3. Кнопку регулирования
4. Нет правильного ответа
10.70 Можно ли в один элемент управления «Поле ввода» вводить значения разных типов?
2. Можно, если для него задан составной тин значения
3. Можно, если для него задан составной тип значения, а также свойство «Выбирать тип»
10.71 При ситуации, отображенной на картинке, если обратиться к «Сотрудник» в модуле формы документа, то.
1. получим сообщение об ошибке из-за некорректного объединения контекстов
2. получим значение реквизита формы
3. получим значение реквизита документа
4. получим значение реквизита документа, но если требуется получить значение реквизита формы, можно использовать обращение «ЭтаФорма. Сотрудник»
10.72 На рисунке представлена:
10.73 В модуле объекта справочника «Номенклатура» объявлена процедура со словом «Экспорт». Может ли она быть вызвана «напрямую» из модулей подчиненных форм?
1. Конечно. Потому что это возможно из модуля любого объекта
2. «Напрямую» она может быть вызвана только из модулей основных форм данного справочника
3. «Напрямую» она может быть вызвана из любой формы конфигурации, где основным реквизитом указан «СнравочникОбъект. Номенклатура»
4. Да. Так она может быть вызвана из модуля любой подчиненной формы справочника «Номенклатура»
10.74 На рисунке представлена:
2. Сводная диаграмма
10.75 Различается ли набор свойств у элемента управления «Поле ввода», созданного в форме и расположенного в табличном поле этой формы?
3. Различается, если только это не поля одного типа значений
10.76 Свойство «Тип значения» элемента управления формы.
1. можно менять всегда и любым способом
2. можно менять только программно
3. нельзя изменить, если задана связь элемента управления с данными
4. в принципе нельзя изменить
10.77 При обращении к форме «извне» для считывания данных.
1. рекомендуется обращаться к общим переменным формы
2. рекомендуется обращаться к элементам управления, отображающим данные
3. рекомендуется обращаться к реквизитам формы и свойствам расширения формы
4. рекомендуется передавать данные через общие переменные общих модулей
10.78 На рисунке представлена:
2. Сводная диаграмма
10.79 Для чего предназначены элементы управления?
1. Для хранения данных
2. Для обеспечения возможности интерактивного изменения данных
3. Для обеспечения отображения данных
10.80 Каким образом в основной форме списка регистра сведений отобразить список элементов справочника «Подразделения»?
1. В основной форме списка регистра сведений отобразить такой список нельзя
2. Создать элемент управления «Табличное иоле». Присвоить свойству этого поля «Тип значения» значение «СправочникСписок. Подразделения»
3. Создать элемент управления «Табличное поле». Создать реквизит формы с типом значения «СправочникСписок. Подразделения». Присвоить свойству табличного поля «Данные» имя созданного реквизита
4. Верны ответы 2 и 3
10.81 Что произойдет, если нажать кнопку командной панели, отмеченную на рисунке?
1. Ничего не изменится
2. Произойдет смещение по горизонтали элемента «Надпись!» и выравнивание его правой границы по правой границе элемента «Надпись2»
3. Произойдет смещение по горизонтали элемента «Надпись2» и выравнивание его правой границы по правой границе элемента «НадписьГ’
4. Оба элемента переместятся к правой краевой выравнивающей линии формы
Поле ввода 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-разработчик делает поле ввода, он может задать ему определенное назначение. Полный список элементов можно посмотреть тут. Есть поля, предназначенные для пароля, даты, телефона, цифр и прочего. Все браузеры реагируют на поля ввода по-разному, внешний вид этих вспомогательных элементов от вас не зависит — только от операционной системы и браузера. В некоторых браузерах на эти элементы можно влиять, в других — нет.
На картинке выше показаны примеры одного и того же поля ввода в разных операционных системах и браузерах.
Если в вашем поле ввода уже есть иконка, но для поля установлено назначение, то вы можете наблюдать разные интересные ситуации, например, дублирование.