Поля ввода: Поле ввода — Компоненты — Контур.Гайды

Подробное руководство по дизайну текстовых полей и форм

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

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

Анатомия текстового поля

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

Вот ключевые элементы обычного текстового поля:
1. Контейнер – интерактивная область ввода

2. Вводимый текст– текст, набираемый в текстовом поле

3. Текст метки – сообщите пользователям, какая информация принадлежит данному полю формы.

4. Текст-плейсхолдер – это описание или пример требуемой информации, которая заменяется текстом, напечатанным пользователем

5. Вспомогательный или проверочный текст (необязательно) – предоставляет дополнительный контекст или проверочное сообщение

6. Иконка перед полем (необязательно) – опишите тип ввода, который требуется для текстового поля

7. Иконка после поля (необязательно) – дополнительный контроль над вводимым текстом, например, скрыть / показать текст и т. д.

Типы текстовых полей

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

(Мы специально не говорим о таких типах полей ввода, как флажки и переключатели, о которых мы расскажем позже в этой серии статей)

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

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

Текстовые поля должны изменять внешний вид в зависимости от состояния и взаимодействий пользователя

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

Выбор лучшего стиля текстового поля

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

Подчеркнутое поле ввода, популяризированное рекомендациями Material design – не лучший выбор. Этот вариант был пересмотрен в результате большого исследования «Evolution of Material Design», которое я рекомендую вам прочитать. Это же исследование показало, что пользователи предпочитают поля ввода с закругленными углами.

Метки, выровненные по левому краю

Хороший выбор, когда запрашиваемые данные не знакомы пользователям.

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

Метки, выровненные по правому краю

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

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

Метки над полем ввода

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

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

Вы можете узнать больше по этой теме в статье Люка Вроблевски «Лучшие примеры дизайна форм» и публикации Матео Пензо «Размещение меток в формах»

Длина текстового поля должна быть пропорциональна информации, ожидаемой от пользователя

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

Плейсхолдеры не являются заменой меток

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

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

Помогите пользователям заполнить формы

Помогите решить часть запросов с помощью автозаполнения. Когда вы печатаете, вы можете нажать либо клавишу «Enter», либо клавишу «стрелка вправо», чтобы принять автозаполнение.
Найдите практически неограниченный список для связанных ключевых слов и фраз с помощью автозаполнения. Он отображается в виде списка с несколькими предложениями в виде раскрывающегося меню.
Предварительно заполните поля и используйте умные значения по умолчанию. Зачастую вы можете легко определить страну и город пользователя по IP или геолокации. И на основе наиболее распространенных сценариев, и аналитики вы можете определить, что должно быть выбрано по умолчанию. Электронная коммерция является исключением, не выбирайте никаких предпочтений, связанных с покупкой, например, размер или цвет товара.

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

Используйте встроенную проверку

«Проверка в реальном времени» – это проверка достоверности данных, введенных пользователем в режиме реального времени по мере заполнения формы, в отличие от одноразовой проверки данных при отправке формы. Реализуйте это правильно, чтобы не нанести вреда:

Отображайте сообщения проверки рядом с полем ввода
Не кричите на пользователей. Сообщения об ошибках должны сообщать пользователям, как решить проблему, а не обвинять их
Избегайте «преждевременной проверки», когда поле помечено как недействительное, до того, как пользователь закончит ввод.
Подумайте об использовании «положительной проверки», это может добавить чувство восторга и прогрессии.

Уменьшите количество полей

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

Не разбивайте текст, например, полное имя и дату, на несколько полей
Не спрашивайте одну и ту же информацию несколько раз
Максимально сократите текст меток и подсказок

Скрывайте нерелевантные поля

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

Используйте условную логику

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

Группируйте связанные поля

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

Избегайте использования нескольких столбцов

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

Разбейте сложные формы на несколько простых шагов

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

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

Минимизируйте возможность навигации за пределами мастера

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

Показывайте соответствующий тип клавиатуры

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

Правильный дизайн создания пароля

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

Перевод статьи uxdesign.cc

Поле для ввода текста | HTML

Тег label
Атрибут placeholder
Другие текстовые поля

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

Начиная со стандарта HTML5 список полей пополнился множеством новых вариантов. Базовыми типами инпутов являются:

Текст
Пароли
Чекбоксы
Радио кнопки

Самый простой способ использования <input> — создание текстового поля для ввода. Именно <input> присутствует во всех полях поиска. Чтобы создать простое текстовое поле для ввода данных, необходимо внутрь формы добавить непарный тег <input> и указать у него атрибут type со значением text:

<form>
  <input type="text">
</form>

Тег label

Поле создано, но совершенно непонятно что там вводить: имя? фамилию? код от сейфа? Чтобы указать назначение поля, используется тег <label>. Это парный тег, который напоминает параграф, но относится именно к описанию поля формы.

<form>
  <label>Введите имя</label>
  <input type="text">
</form>

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

Для связи label используется один из двух вариантов:

Связь по атрибуту id. Для этого у тега <input> указывается атрибут id с произвольным именем, а у <label> добавляется атрибут for с таким же именем, как и значение id у элемента input

<form>
  <label for="name">Введите имя</label>
  <input type="text">
</form>

Связь через вложенность. Вы обратили внимание, что <label> — это парный тег? Для связи можно вложить input внутрь label, тогда они автоматически свяжутся друг с другом

<form>
  <label>Введите имя
    <input type="text">
  </label>
</form>

Атрибут placeholder

Встречаются ситуации, когда для поля есть описание, но совершенно непонятно, в каком формате нужно заполнить данные. Например, вначале указать имя, а потом фамилию, или наоборот? Чтобы помочь пользователю сориентироваться используется атрибут placeholder у тега <input>. Значение этого атрибута будет выведено внутри текстового поля.

<form>
  <label for="name">Введите имя и фамилию</label>
  <input type="text" placeholder="Иван Иванов">
</form>

Введите имя и фамилию

Другие текстовые поля

Замечали, что при вводе паролей, браузер автоматически проставляет звёздочки вместо показа символов? Этого можно добиться указав значение password для атрибута type:

<form>
  <label for="pin">Введите пинкод</label>
  <input type="password" placeholder="1234">
</form>

Введите пинкод

В стандарте HTML5 появилось ещё несколько интересных типов для тега <input>, которые реализуют обычное текстовое поле, но имеют свою реализацию. Например:

email
number
search
tel
url

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

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

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте 2 текстовых поля

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет 🤨

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

Мой код отличается от решения учителя 🤔

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

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

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

←Предыдущий

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Тег ввода HTML

❮ Назад
Полный справочник HTML
Далее ❯

Пример

HTML-форма с тремя полями ввода; два текстовых поля и одна кнопка отправки:

Попробуйте сами »

Определение и использование

Тег указывает поле ввода, в которое пользователь может вводить данные .

Элемент является самым
важный элемент формы.

Элемент может отображаться
несколькими способами, в зависимости от атрибута типа.

Существуют следующие типы ввода:

<тип ввода = "кнопка">
<тип ввода="дата">
<тип ввода = "файл">
<тип ввода="скрытый">
<тип ввода="месяц">
<тип ввода="число">
<тип ввода="пароль">
<тип ввода="диапазон">
<тип ввода="сброс">
(значение по умолчанию)
<тип ввода="время">
<тип ввода="неделя">

Посмотрите на атрибут type, чтобы увидеть примеры
для каждого типа ввода!

Советы и примечания

Совет: Всегда используйте тег для определения меток для
, , <тип ввода = "радио"> , < ввод type="file"> и .

Поддержка браузера

Элемент
<ввод>	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
принять	file_extension audio/* video/* image/* media_type	Указывает фильтр для типов файлов, которые пользователь может выбрать из файла. диалоговое окно ввода (только для type=”file”)
альтернативный	текст	Указывает альтернативный текст для изображений (только для type=”image”)
автозаполнение	на на	Указывает, должно ли быть включено автозаполнение для элемента
автофокус	автофокус	Указывает, что элемент должен автоматически получать фокус при загрузке страницы
проверено	проверено	Указывает, что элемент должен быть предварительно выбран при загрузке страницы (для type=”checkbox” или type=”radio”)
имя каталога	имя ввода . дир	Указывает, что будет отправлено направление текста
инвалид	отключен	Указывает, что элемент должен быть отключен
форма	form_id	Задает форму, к которой принадлежит элемент
формация	URL-адрес	Указывает URL-адрес файла, который будет обрабатывать элемент управления вводом при отправке формы (для type=”submit” и type=”image”)
тип формы	application/x-www-form-urlencoded multipart/form-data text/plain	Указывает, как данные формы должны быть закодированы при отправке на сервер (для type=”submit” и type=”image”)
метод формы	получить пост	Определяет метод HTTP для отправки данных на URL-адрес действия (для type=”submit” и type=”image”)
формировать	формановация	Определяет, что элементы формы не должны проверяться при отправке
целевая форма	_blank _self _parent _top имя кадра	Указывает, где отображать ответ, полученный после отправки формы (для type=”submit” и type=”image”)
высота	пикселей	Задает высоту элемента (только для type=”image”)
список	datalist_id	Относится к элементу , который содержит предопределенные параметры для элемента
макс.	номер дата	Задает максимальное значение для элемента
максимальная длина	номер	Указывает максимально допустимое количество символов в элементе
мин	номер дата	Указывает минимальное значение для элемента
минимальная длина	номер	Задает минимальное количество символов, необходимое в элементе
несколько	несколько	Указывает, что пользователь может ввести более одного значения в элемент
имя	текст	Указывает имя элемента
образец	регулярное выражение	Указывает регулярное выражение, по которому проверяется значение элемента
заполнитель	текст	Задает короткую подсказку, описывающую ожидаемое значение элемента
только чтение	только для чтения	Указывает, что поле ввода доступно только для чтения
требуется	требуется	Указывает, что поле ввода должно быть заполнено перед отправкой формы
размер	номер	Указывает ширину в символах элемента
источник	URL-адрес	Указывает URL-адрес изображения для использования в качестве кнопки отправки (только для тип = “изображение”)
шаг	номер любой	Задает интервал между допустимыми числами в поле ввода
тип	кнопка Флажок Цвет Дата DateTime-Local Электронная почта Файл Hidden Изображение месяц Номер Пароль Радио Диапазон Сброс Поиск Отправить TEL Текст URL неделя	Задает тип элемента для отображения
значение	текст	Задает значение элемента
ширина	пикселей	Задает ширину элемента (только для type=”image”)

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Учебник HTML:

HTML-формы
HTML-элементы формы
Типы ввода HTML
Атрибуты ввода HTML
Форма ввода HTML* Атрибуты

Ссылка HTML DOM:

Объект кнопки ввода
Объект флажка ввода
Объект ввода цвета
Объект ввода даты
Объект ввода даты и времени
Входной объект DatetimeLocal
Объект ввода электронной почты
Входной объект FileUpload
Вход Поиск предметов
Объект входного изображения
Ввод объекта месяца
Объект ввода номера
Объект ввода пароля
Объект диапазона ввода
Входной радиообъект
Объект сброса ввода
Входной объект поиска
Ввод объекта отправки
Объект ввода текста
Объект времени ввода
Объект ввода URL
Объект недели ввода

Настройки CSS по умолчанию

Нет.

❮ Предыдущий
Полный справочник HTML
Следующий ❯

НАБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Top5 Examples

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ |
О

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

Входное значение HTML Атрибут

❮ Тег HTML

Пример

HTML-форма с начальными значениями (по умолчанию):

Попробуйте сами »

Определение и использование

Атрибут value указывает значение <ввод> элемент.

Атрибут value используется по-разному для разных типов ввода:

Для “кнопки”, “сброса” и “отправить” – он определяет текст на кнопке
Для “текст”, “пароль” и “скрытый” – определяет начальное (по умолчанию) значение поля ввода
Для «флажка», «радио», «изображения» — определяет значение, связанное с вводом (это также значение, которое отправляется при отправке)

Примечание: Атрибут значение нельзя использовать с <тип ввода="файл"> .

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую атрибут.

Атрибут
значение	Да	Да	Да	Да	Да

Синтаксис

❮ Тег HTML

НАБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.