Атрибут placeholder
Атрибут placeholder задает подсказку в поле ввода HTML формы.
Подсказка placeholder нужна для того, чтобы указать пользователю, что именно следует вводить в данное поле. Сама подсказка будет расположена в поле ввода, но, в отличие от атрибута value , будет пропадать автоматически при попытке ввести текст.
Применить CSS стили к подсказке placeholder вы можете с помощью псевдоэлемента placeholder .
Пример
Давайте полю ввода установим подсказку placeholder :
Пример . Атрибут value одновременно с placeholder
А здесь давайте полю ввода установим одновременно подсказку placeholder и атрибут value . Если вы удалите содержимое атрибута value , то увидите подсказку, которая скрывается под ним:
Смотрите также
- атрибут value ,
который задает значение по умолчанию для поля ввода
Подсказывающий текст
В дизайне часто требуется вставить пояснение к текстовому полю, но не всегда для этого имеется место. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля, при получении фокуса исходный текст должен пропадать. Это делается с помощью атрибута placeholder , значением которого служит любой текст. Подсказка делается для полей , , , , , и , иными словами, везде, где вводится текст.
Подсказывающий текст отображается серым цветом, исчезает при получении фокуса и снова появляется, если фокус теряется. Если в поле с подсказкой ввести любой текст, то подсказка больше не появится. Также её не будет при наличии атрибута value с непустым значением.
В примере 1 показано добавление подсказки к полям формы для создания авторизации.
Пример 1. Подсказывающий текст
HTML5 IE 10+ Cr Op Sa Fx
Результат примера в браузере Chrome показан на рис. 1.
Рис. 1. Вид полей с подсказывающим текстом
Как сделать подсказки для полей ввода HTML — атрибут placeholder для input, select, textarea
28.07.18 ИТ / HTML 11238
При добавлении полей ввода на страницы сайта для них необходимо указывать вспомогательный текст – подсказки, которые объясняют предназначение полей. Раньше такие подсказки обычно делались просто путем добавления строки текста выше над полем, но можно было встретить самописные решения, которые выполняли роль нового атрибута placeholder.
Как все началось? Часто на практике приходилось для компактности вводить подсказки прямо в полях вводах, а не добавлять лишнюю строку с подсказкой. Но специального атрибута для выполнения этой функции не было – можно было лишь просто добавить текст внутри поля при помощи значения value. Когда пользователь кликнет на поле — при помощи JavaScript происходило удаление текста и если пользователь ничего не оставил в поле, то при удалении фокуса — подсказка возвращалась на свое место опять же при помощи JavaScript. Также необходимо было изменять цвет текста на более светлый при помощи CSS-свойств, чтобы он выглядел как подсказка, а не обычный текст. То есть, данное решение требовало дополнительного написания кода.
Видя такое положение дел, разработчики HTML начали работу над этим – для тега input type=»text» со временем был разработан и добавлен специальный атрибут – placeholder. Он позволяет быстро прописать нужную подсказку для текста, которая будет показана пользователю. Цвет текста в подсказке сразу выделяется серым цветом.
На настоящее время поддержка атрибута placeholder есть во всех современных браузерах. Браузеры, не поддерживающие данный атрибут, просто игнорируют его. Существуют специальные разработки – полифилы, которые при помощи JavaScript реализуют работу атрибута placeholder. Поэтому можно просто писать данный атрибут, а в крайних случаях для остальных браузеров использовать полифилы.
Но как быть с другими типами полей input? Например, type=»checkbox» и type=»radio». Для этих типов полей можно использовать тег label, он задает подсказку для помещаемого в него поля. Например, можно написать так:
Отметьте нужное: Для select нет атрибута placeholder, но можно сделать подсказку внутри поля простым способом – ею будет первый option из этого select. Можно визуально выделить его, например, добавить вначале и в конце дефис.
Остается разобраться с textarea. У тега textarea атрибут placeholder отсутствует, но можно добавить подсказку прямо в поле, просто разместив его между тегами textarea.
Краткий итог, как сделать подсказки для полей ввода HTML:
- для input type=»text» следует использовать атрибут placeholder;
- для остальных типов input можно использовать тег label;
- для select используется подсказка в виде первого option;
- для textarea подсказка размещается внутри данного тега.
Мы рассмотрели, каким образом можно сделать подсказки для различных полей ввода HTML, даже если они не поддерживают атрибут placeholder.
MagentaWAVE
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
18 февраля 2016
Простые всплывающие подсказки на CSS
Для пояснения или размещения дополнительной информации на сайтах, часто используются всплывающие подсказки. Стандартным инструментом для добавления описания к элементам, является HTML-атрибут title, но его возможности, весьма ограничены, поэтому часто возникает потребность в создании более функциональных подсказок с собственным оригинальным оформлением.
В данной статье представлены несколько способов как сделать всплывающую подсказку на CSS без применения JavaScript, с возможностью размещения изображений и дополнительных блоков, появляющуюся по клику и при наведении на элемент курсора.
ПРИМЕР
Реализация простых подсказок с помощью атрибута data-title
Самый простой вариант — это CSS-стилизация обычной, текстовой подсказки. Для этого нужно использовать атрибут data-title, вместо привычного title, чтобы избежать появления сразу двух подсказок — с собственным оформлением и стандартным, которое изменить нельзя.
HTML конструкция выглядит так:
Атрибут tabindex для тегов, которым нужно принудительно придать фокус по клику — обязателен(!), как и его значение — любое целое число. Иначе для ссылки или другого тега псевдокласс :focus не сработает. Уникальность значения для данного атрибута на странице не важна.
Подсказка будет выводиться с помощью псевдоэлемента :before, оформленного соответствующим образом.
span.support::before <
content: attr(data-title); /*помещаем подсказку в псевдоэлемент*/
display: none; /*скрываем подсказку*/
>
Чтобы реализовать появление данной подсказки по клику применяется такой CSS-код:
span.support:focus::before <
display: block;
>
Чтобы сделать принудительный перенос строки в всплывающей подсказке из стандартного атрибута title или сделанной с помощью альтернативного атрибута — data-title, достаточно в нужном месте вставить HTML-символ переноса —
Подсказка появляющаяся по клику реализация с помощью тега ссылки
Пример, когда блок с подсказкой находится внутри ссылки:
a.support:focus .tip <
display:block;
>
Расположение непосредственно после ссылки:
a.support-two:focus + .tip-block .tip-two <
display:block;
>
Дополнительная обертка блока подсказки — контейнер с классом .tip-block — используется когда подсказка расположена непосредственно рядом с вызывающим её элементом, чтобы относительно него манипулировать положением подсказки с абсолютным позиционированием.
.tip-block <
display: inline-block;
position: relative; /*обязательно*/
background: transparent;
margin: 0;
padding: 0;
border: 0;
height: 0;
width: 1px;
>
Создание подсказка появляющейся по клику с помощью тега INPUT
При использовании многофункционального тега формы HTML-конструкция немного сложнее чем предыдущие. В примере также добавлен дополнительный элемент — крестик для закрытия подсказки (тег с классом .tip-close) — он не обязателен, но позволяет несколько улучшить функционал.
Прежде всего нужно убрать ячейку флажка:
.tip-checkbox <
display: none;
>
Показ подсказки организован следующим образом:
#tip-checkbox:checked ~ * .tip-three <
display: block;
>
Скрыть всплывающий блок можно вновь кликнув на значок с вопросом или по кнопке закрытия подсказки, оформленной соответствующим образом.
Псевдокласс :checked применяется к таким элементам как переключатели(type=»radio» ) или флажки(type=»checkbox» ), когда они выбраны, при этом позволяя манипулировать основным и соседними (+ или ~) элементами, применяя к ним необходимые свойства.
На словах такая хитрость или как говорят — CSS:checked хак, будет звучать примерно так: «Если флажок установлен, применить следующий стиль, к такому-то элементу.» Пример из этой статьи является одним из многочисленных вариантов использования :checked.
Более подробное описание можно посмотреть здесь (англ.).
Подсказка появляющаяся при наведении курсора
Для того чтобы организовать вывод подсказки на экран таким образом, достаточно вместо псевдокласса :focus использовать :hover.
Например:
a.support-hover:hover .tip <
display:block;
>
a.support-hover:hover + .tip-block .tip <
display:block;
>
— когда блок расположен непосредственно рядом с вызывающим элементом.
Общий CSS
Для всех элементов, с соответствующими селекторами, сразу можно задать общие стили, которые будут одинаковы для любой конструкции:
— для основного блока (элемента с классом .support):
.support <
display: inline-block;
position: relative; /*обязательное параметр*/
text-decoration: none;
cursor: pointer;
>
— оформление виде кнопки (тег ):
.support em <
background: #FF6600;
border-radius: 20px;
border: 1px solid #999;
text-align: center;
color: #FFF;
font: normal bold 16px Arial;
padding: 0 4px;
>
— оформление для блока подсказки — скрыть его по умолчанию, задать свойства определяющие его положение и внешний вид:
.tip,
span.support::before/*если используется атрибут data-title*/ display: none;
position: absolute;
z-index: 9998;
top: 0;
left: 100%;
background: #EDEDED;
text-align: left;
color: #000;
cursor: default;
padding: 5px;
margin: -15px 0 0 10px; /*регулирует положение, значения зависят от применяемой конструкции*/
width: 200px;
min-height: 50px;
height: auto;
>
Некоторые браузеры, в частности Google Chrome, при получении элементом фокуса, обрамляют его в рамку, это конечно очень полезно, но не в данном случаи. Избавиться от такой рамки можно с помощью CSS, задав соответствующие свойства для нужной ссылки.
В нашем примере это выглядит так:
*:focus <
outline: none;
>
Теперь, в зависимости от используемого варианта, осталось организовать функционал всплывающей подсказки, который заключается в применении псевдоклассов.
Просмотреть весь код целиком и самостоятельно поработать с ним, можно скачав HTML-файл с исходным кодом демо-страницы