подсказка в текстовом поле

Как сделать подсказку в input/textarea

Давайте разбираться! О каких подсказках идет речь и как с ними работать!?

Все об атрибуте placeholder

Что такое placeholder

Исчезает при получении фокуса.

Как используется placeholder в поле ввода input пример

Результат вывода подсказки внутри тега input :

Для второго примера возьмем двойной тег textarea и добавим ему атрибут подсказки placeholder с текстом:

Результат вывода подсказки внутри тега textarea

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

Как удалить подсказку в поле ввода placeholder

Всплывающая подсказка при наведении мышки

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

текст которой вы можете изменить по своей необходимости!

Пример использования всплывающей подсказки в поле ввода input

Возьмем выше приведенный пример поля ввода input и добавим ему всплывающую подсказку:

Результат использования всплывающей подсказки в поле ввода input

Результат вывода всплывающей подсказки внутри тега textarea

Если интересно: Я как-то делал отдельную страницу о стилизации title

Как отключить подсказки автозаполнения!?

04/05/2020

Если вы хотите отключить подсказки автозаполнения у себя на сайте, то ответ :

Источник

Поле ввода 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 не должен происходить на кнопку отправки формы.

Валидация

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

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

Дизайн

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

Источник

WPF, Поле ввода с подсказкой

public class WatermarkedTextBox : DependencyObject
<
#region Fields

private const string _defaultWatermark = «None» ;

///
/// Initializes a new instance of the class with default watermark text.
///
public WatermarkedTextBox()
: this (_defaultWatermark)
<
>

///
/// Initializes a new instance of the class.
///
///

The watermark to show when value is null or empty.

public WatermarkedTextBox( string watermark)
<
WatermarkText = watermark;
>

public static void OnWatermarkTextChanged(DependencyObject box, DependencyPropertyChangedEventArgs e)
<
//Add changed functionality here
>

Сказано-сделано. Для начала, унаследуем наш класс от TextBox (вместо DependencyObject ).
Если заглянуть вот сюда, то можно увидеть следующий текст.

The ControlTemplate for a TextBox must contain exactly one element that is tagged as the content host element; this element will be used to render the contents of the TextBox. To tag an element as the content host, assign it the special name PART_ContentHost. The content host element must be either a ScrollViewer or an AdornerDecorator. The content host element may not host any child elements.

То есть где-то внутри нашего стиля будет находится:

TextBlock x:Name =»WatermarkText» Text =»» Foreground =»Gray» Margin =»5,0,0,0″ HorizontalAlignment =»Left» VerticalAlignment =»Center» Visibility =»Collapsed» IsHitTestVisible =»False» />

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

И для него можно будет написать следующие триггеры:

MultiTrigger.Conditions >
Condition Property =»IsKeyboardFocusWithin» Value =»False» />
Condition Property =»Text» Value =»» />
MultiTrigger.Conditions >
Setter Property =»Visibility» TargetName =»WatermarkText» Value =»Visible» />
MultiTrigger >
MultiTrigger >
MultiTrigger.Conditions >
Condition Property =»IsKeyboardFocusWithin» Value =»False» />
Condition Property =»Text» Value =»» />
MultiTrigger.Conditions >
Setter Property =»Visibility» TargetName =»WatermarkText» Value =»Visible» />
MultiTrigger >

Style TargetType =»» BasedOn =»>» >
Setter Property =»Template» >
Setter.Value >
ControlTemplate TargetType =»» >
Grid >
ScrollViewer x:Name =»PART_ContentHost» />
TextBlock x:Name =»WatermarkText» Text =»» Foreground =»Gray» Margin =»5,0,0,0″ HorizontalAlignment =»Left» VerticalAlignment =»Center» Visibility =»Collapsed» IsHitTestVisible =»False» />
Grid >
ControlTemplate.Triggers >
MultiTrigger >
MultiTrigger.Conditions >
Condition Property =»IsKeyboardFocusWithin» Value =»False» />
Condition Property =»Text» Value =»» />
MultiTrigger.Conditions >
Setter Property =»Visibility» TargetName =»WatermarkText» Value =»Visible» />
MultiTrigger >
MultiTrigger >
MultiTrigger.Conditions >
Condition Property =»IsKeyboardFocusWithin» Value =»False» />
Condition Property =»Text» Value =»» />
MultiTrigger.Conditions >
Setter Property =»Visibility» TargetName =»WatermarkText» Value =»Visible» />
MultiTrigger >
ControlTemplate.Triggers >
ControlTemplate >
Setter.Value >
Setter >
Style >

Источник

Как убрать всплывающие подсказки при наборе в input?

Делаю строку поиска, ответы через ajax подставляются списком в блок ниже input, но при наборе браузер предлагает(подсказывает) мои прежние запросы, как можно это убрать?

3 ответа 3

задать атрибуту autocomplete значение off

В этом тысячелетии предыдущие фиксы не работают.

Решение: К примеру, для фикса поля с адресом в качестве name нужно использовать название не содержащее подстроку ‘address’.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html input или задайте свой вопрос.

Связанные

Похожие

Подписаться на ленту

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

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.1.40358

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

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

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

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

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

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

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

Состав

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

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

Cостояния

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник