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

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

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

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

Что такое placeholder

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

04/05/2020

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

Источник

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

Видя такое положение дел, разработчики HTML начали работу над этим – для тега input type=»text» со временем был разработан и добавлен специальный атрибут – placeholder. Он позволяет быстро прописать нужную подсказку для текста, которая будет показана пользователю. Цвет текста в подсказке сразу выделяется серым цветом.

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

Но как быть с другими типами полей input? Например, type=»checkbox» и type=»radio». Для этих типов полей можно использовать тег label, он задает подсказку для помещаемого в него поля. Например, можно написать так:

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

Остается разобраться с textarea. У тега textarea атрибут placeholder отсутствует, но можно добавить подсказку прямо в поле, просто разместив его между тегами textarea.

Краткий итог, как сделать подсказки для полей ввода HTML:

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

Источник

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 >

Источник

Подсказка в поле ввода

Это поле, которое позволяет выбрать цвет.

Пример

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

Поле ввода даты

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

Можно задать нижнюю и верхнюю границу диапазона дат атрибутами min и max.

Пример

Поле ввода адреса электронной почты

Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)

Пример

Файл FILE

Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.

Пример

Сценарий получения файла на PHP:

Браузер Chrome понимает дополнительные атрибуты «webkitdirectory directory«, указание которых у input позволяет выбирать целые папки:

Скрытое поле HIDDEN

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

Пример

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

Пример

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

Поле ввода чисел NUMBER

Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.

Пример

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

Пример

Для задания любого шага используйте step=»any».

Пример

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

Если нужно, чтобы стрелочки в поле number были всегда, задайте стиль:

Если нужно убрать стрелочки в поле number, задайте стиль:

Поле ввода пароля PASSWORD

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

Пример

Переключатель RADIO

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

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

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

Пример

Ползунок RANGE

Поле предназначено для ввода числа в указанном диапазоне.

Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).

Пример

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

Пример

Поле range отображается разными браузерами по-разному.

Если хотите своё оформление, задайте стили для ползунка:

Но победить до конца стили IE11 не удастся!

Кнопка RESET

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

Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.

Пример

Кнопка SUBMIT

Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки BUTTON. Сама она не передается, а служит только для управления.

Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit, заданный в теге

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

Пример

Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.

Пример

Поле ввода TEXT

Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type=»text»], то тогда атрибут type=»text» пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.

Пример

Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку RESET, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.

Источник

Управляемые формы: расширенная подсказка элементов управления

Помните, как раньше на платформе 1С:Предприятие 8.2 приходилось кропотливо описывать дружелюбный интерфейс пользователя с подсказками и пояснениями!? Как плодились группы элементов, декорации и прочие украшения, лишь бы форма выглядела пристойно!?

Начиная с релиза 8.3.1 платформы 1С:Предприятие 8.3 все изменилось: для элементов управления появилась расширенная подсказка, а мир засиял новыми красками).

«Что же изменилось с тех пор?» — спросите Вы…

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

В палитре свойств, кроме самой подсказки появилось два дополнительных поля:

Подсказка ввода

Для удобства демонстрации свойств этого механизма, я набросал небольшую форму справочника «Физические лица», где нужно указывать фамилию имя и отчество физ. лица, номер телефона в формате 8(999)999-99-99, и паспортные данные:

Давайте посмотрим, как видит эти подсказки пользователь:

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

Есть и другие способы отображения подсказки:

Расширенная подсказка

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

В дереве элементов у выбранного поля появится подчиненный элемент «Расширенная подсказка», а в палитре свойств в поле «Заголовок» Вы сможете указать текст подсказки или отредактировать его в отдельном редакторе текста:

Источник