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

Using tooltips in form fields

Here you can see a tooltip when you put your focus on any of the following form fields. You can move between fields with your keyboard (using the TAB key) or with your mouse.

HTML coding

Here is our HTML structure. Each tooltip is specified in the title attribute of each form element:

This form has minimal CSS styling and you can see it by looking at the standalone page’s source code.

CSS coding

Here is our tooltip «skin». Everything is pure CSS without any images or background images:

JavaScript coding

All tooltips are enabled with the following configuration. If you want to customize the events when the tooltip is shown, then you should read about event management from the tooltip documentation.

HTML input field hint

I want to provide the user with a hint on what he needs to enter into my text field. However, when I set the value, it does not disappear once a user clicks on the text field. How can you make it disappear?

10 Answers 10

With a bit of JavaScript:

HTML5 has a nice attribute for this, called placeholder :

but this attribute is not supported in old browsers.

the best way to give a hint is placeholder like this:

You’d need attach an onFocus event to the input field via Javascript:

I think for your situation, the easy and simple for your html input , you can probably add the attribute title

With HTML5, you can now use the placeholder attribute like this:

I have the same problem, and I have add this code to my application and its work fine for me.

step -1 : added the jquery.placeholder.js plugin

step -2 :write the below code in your area.

And now I can see placeholders on the input boxes!

This is exactly what you want

If you mean like a text in the background, I’d say you use a label with the input field and position it on the input using CSS, of course. With JS, you fade out the label when the input receives values and fade it in when the input is empty. In this way, it is not possible for the user to submit the description, whether by accident or intent.

If you don’t insist on the hint being displayed inside the input field, a modern solution would use a label element with the for attribute referring to the id of the input field, like this:

If you click the label, the input field will get the input focus. If you hover over the label, it will show a longer explanation. Generally the label should describe well enough what the user has to enter (in the case of user name it should be very much obvious).

Атрибут placeholder

Удобный атрибут для подсказки в поле ввода. Но есть нюансы!

Время чтения: меньше 5 мин

1. Кратко
2. Пример
3. Как пишется
4. Как понять
5. Контрастность
6. Подсказки
7. На практике
   1. Марианна Минич советует

   Обновлено 3 октября 2022

   Кратко

   Скопировать ссылку «Кратко» Скопировано

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

   Пример

   Скопировать ссылку «Пример» Скопировано

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

   Атрибут placeholder можно задать для <input> и <textarea> . Атрибут работает со следующими типами:

   • text ;
   • search ;
   • url ;
   • telephone ;
   • email ;
   • password .

   Внешний вид можно стилизовать при помощи псевдоэлемента : : placeholder .

   Для браузеров старых версий нужны вендорные префиксы:

   Как понять

   Скопировать ссылку «Как понять» Скопировано

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

   Если для заполнения поля нужна инструкция (формате номера телефона или длина пароля), то такую инструкцию лучше оформить отдельно от поля ввода. Иначе пользователь не сможет эффективно её использовать, потому что заполнители исчезают во время набора текста.

   В этом примере инструкция к паролю всегда доступна пользователю и точно не потеряется.

   Контрастность

   Скопировать ссылку «Контрастность» Скопировано

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

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

   • текст и его фон должны иметь контрастность не менее 4.5:1;
   • текст заголовка (или просто крупный текст) должен иметь соотношение не менее 3:1.

   Подробнее о шкале контрастности можно узнать в руководстве по доступности веб-сайтов.

   Подсказки

   Скопировать ссылку «Подсказки» Скопировано

   �� Часто из-за дизайнерских решений placeholder используется для замены более семантического элемента метки. Однако это не означает, что текст-заполнитель может заменить <label> , поскольку это создаёт неудобства для пользователей с особыми потребностями.

   На практике

   Скопировать ссылку «На практике» Скопировано

   Марианна Минич советует

   Скопировать ссылку «Марианна Минич советует» Скопировано

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

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

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

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

   Данная рубрика заменит Вам полноценный «HTML учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML и DHTML.

   Бесплатные уроки HTML для начинающих

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

   • 

   Лайфхак: наиполезнейшая функция var_export()

   При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

   17 бесплатных шаблонов админок

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

   30 сайтов для скачки бесплатных шаблонов почтовых писем

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

   Как осуществить задержку при нажатии клавиши с помощью jQuery?

   К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

   15 новых сайтов для скачивания бесплатных фото

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

   50+ бесплатных Bootstrap 3 шаблонов и элементов UI

   Подборка бесплатных UI материалов и Bootstrap 3 шаблонов за уходящий месяц.

   Зум слайдер

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

   Похожие публикации:

   1. Как перенести почту с gmail
   2. Как открыть браузер на пайтоне
   3. Как работать в visual studio 2022
   4. Celeron 723 чем заменить