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).
Как сделать подсказку в input в html
Однострочное текстовое поле создается с помощью элемента input , когда его атрибут type имеет значение text :
С помощью ряда дополнительных атрибутов можно настроить текстовое поле:
dir : устанавливает направление текста
list : устанавливает список подсказок для ввода в поле
maxlength : максимально допустимое количество символов в текстовом поле
pattern : определяет шаблон, которому должен соответствовать вводимый текст
placeholder : устанавливает текст, который по умолчанию отображается в текстовом поле
readonly : делает текстовом поле доступным только для чтения
required : указывает, что текстовое поле обязательно должно иметь значение
size : устанавливает ширину текстового поля в видимых символах
value : устанавливает значение по умолчанию в текстовом поле
Применим некоторые атрибуты:
В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size — то есть количество символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем maxlength, мы не сможем.
В данном случае также важно различать атрибуты value и placeholder , хотя оба устанавливают видимый текст в поле. Однако placeholder устанавливает своего рода подсказку или приглашение к вводу, поэтому он обычно отмечается серым цветом. В то время как значение value представляет введенный в поле текст по умолчанию:
Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с disabled текстовое поле затеняется:
Среди атрибутов текстового поля также следует отметить такой атрибут как list . Он содержит ссылку на элемент datalist , который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:
Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.
Направление текста
Атрибут dir задает направление ввода текста. Он может принимать два значения: ltr (слева направо) и rtl (справа налево):
Поле поиска
Для создания полей поиска предназначен элемент input с атрибутом type=»search» . Формально он представляет собой простое текстовое поле:
Поле ввода пароля
Для ввода пароля используется элемент input с атрибутом type=»password» . Его отличительной чертой является то, что вводимые символы маскируются точками:
HTML <input> title Attribute
The title attribute on an <input> tag adds a tooltip with title text to the input element.
Hovering the mouse over the input element will display the tooltip.
Example
A title attribute on an <input> element.
Hover over the input field to see the tooltip.
Code explanation
The title attribute is placed in the <input> tag.
The value can be any string.
Hover the mouse over the input field and after a second a tooltip appears.
Using title
The title attributes provides additional information about the <input> element.
Как сделать подсказку в 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 шаблонов за уходящий месяц.
Зум слайдер
Сегодняшний черновик — это простой слайдер с возможностью раскрытия подробной информации о каждом элементе.