Атрибут placeholder
Атрибут placeholder задает подсказку в поле ввода HTML формы.
Подсказка placeholder нужна для того, чтобы указать пользователю, что именно следует вводить в данное поле. Сама подсказка будет расположена в поле ввода, но, в отличие от атрибута value , будет пропадать автоматически при попытке ввести текст.
Применить CSS стили к подсказке placeholder вы можете с помощью псевдоэлемента placeholder .
Пример
Давайте полю ввода установим подсказку placeholder :
Пример . Атрибут value одновременно с placeholder
А здесь давайте полю ввода установим одновременно подсказку placeholder и атрибут value . Если вы удалите содержимое атрибута value , то увидите подсказку, которая скрывается под ним:
Смотрите также
- атрибут value ,
который задает значение по умолчанию для поля ввода
placeholder, ::placeholder и :placeholder-shown
Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег заменяют на атрибут placeholder , тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения. [uxdesign.cc]
Email Хорошо
Стилизация: изменить цвет placeholder CSS
Псевдоэлемент ::placeholder CSS определяет внешний вид подсказки из атрибута placeholder . Список поддерживаемых свойств ограничен тем же списком, что псевдоэлемент ::first-line [csswg.org] и на текущий день не включает плавный переход transition .
Поменять стиль поля ввода с placeholder CSS
Селектор [placeholder] определяет внешний вид элементов, у которых задан атрибут placeholder .
[placeholder]
Псевдокласс :placeholder-shown CSS определяет внешний вид поля, пока видна подсказка из атрибута placeholder .
.raz:placeholder-shown
Подсказка пропадает при получении фокуса и
.raz:focus::placeholder
В конце длинного обрезанного подсказывающего текста поставить многоточие
placeholder="name@site.ru ">
Текст в плейсхолдер должен быть коротким, иначе он не имеет смысла, так как его никто не сможет увидеть.
Отчество Обязательно заполняется при наличии
Отчество Обязательно заполняется при наличии
Сделать смещающиеся или всплывающие в
.raz < position: relative; >.raz span < position: absolute; bottom: 0; left: 2px; opacity: .5; visibility: hidden; transition: .2s; >.raz input:placeholder-shown ~ span < visibility: visible; >.raz input:placeholder-shown:focus ~ span, .raz input:not(:placeholder-shown) ~ span
.raz < position: relative; >.raz span < position: absolute; bottom: 50%; left: 2px; opacity: 0; visibility: hidden; transition: .3s; >.raz input:not(:placeholder-shown) ~ span
Плавающие метки неоднородны с метками элементов других типов веб-формы. Их менее контрастный цвет хуже различим. [medium.com]
ФИО Возраст Плохо
Эффект placeholder для
Атрибут placeholder работает только для и , даже если у других тегов указан атрибут contenteditable . [whatwg.org]
Древний метод на память, изменяющий value JavaScript
- Атрибут title
- Как сделать placeholder для
- Убрать уголок у textarea
- input::before или input::after
CoMiGo Games Стоит добавить тот факт, что placeholder в Мозилле и Хроме серьёзно отличаются — у Мозилки он с 50% прозрачностью, а в Хроме непрозрачный. Поэтому в Хроме они особо хреново распознаются как заглушка пустого поля. Поэтому я везде дополнительно пихаю такой вот код:
::-moz-placeholder, ::-webkit-input-placeholder, :-ms-input-placeholder
NMitra Да, мне тоже нравится полупрозрачный плейсхолдер. Только вот нужно писать разные правила с селекторами с префиксами, в которых полнейшее разночтение
::-webkit-input-placeholder < >input:-ms-input-placeholder < >input::-ms-input-placeholder < >input:-moz-placeholder < >input::-moz-placeholder < >input::placeholder
CoMiGo Games Ну, один такой блок кода всё равно можно добавить и перетерпеть этот момент 🙂 Так, конечно, в реальном мире разночтения отсутствуют только в том случае, если ты пишешь гибридное веб-приложение, которое всегда поставляется вместе со своим определённым вшитым браузером (как у меня, хо-хо))) Чтобы автоматически добавлялись всякие такие браузерные вариации, люди придумали препроцессоры CSS (которые берут файлы на своём языке и создают на их основе CSS) и постпроцессоры (которые работают на основе простого CSS и делают его ещё круче). Из последних известен PostCSS, из первых я предпочитаю Stylus. Надо во всём этом разбираться, да, но когда разберёшься и наделаешь себе шаблонов проектов — всё идёт на поток и на конфигурацию этих радостей современного интернета не обращаешь внимание 🙂 В общем, теперь, если будет свободное время, ты знаешь, на что его ещё можно потратить 😀 NMitra Это всё уже почти в прошлом: новые префиксы к свойствам браузеры не добавляют. С существующими нельзя добиться нормального отображения во всех версиях браузеров (IE6 и т.п.). Так что я просто отрубаю какой-то эффект для старых версий. Единственное, сморю, чтобы элемент был пусть не таким красивым, ровным и аккуратным, зато доступным. Например, надпись из span видна только при поддержки :placeholder-shown :
.raz span < visibility: hidden; >.raz input:placeholder-shown ~ span < visibility: visible; >.raz input:placeholder-shown:focus ~ span, .raz input:not(:placeholder-shown) ~ span
Как сделать подсказку в input в html
С самого начала — вам нужно разобраться с : «Что такое подсказка в input«. Самая простая «подсказка в input» — это атрибут html » «.
Как поставить подсказку в input
Для того, чтобы вы увидели подсказку в поле input вам понадобится:
Для создания примера подсказки в input нами нужен тег input.
Внутрь тега помещаем атрибут , который и отвечает за подсказку внутри input
Помещаем в него произвольный текст.
пример подсказки в input.
Соберем код нашего input с подсказкой:
Код input с подсказкой
Пример вывода input с подсказкой
Разместим прямо здесь полученный input с подсказкой:
Как отключить подсказки в input!?
Если у вас есть доступ к коду с тегами, то:
Отключить подсказки в input.
Для отключения подсказки внутри тега input — просто удаляем атрибут html » » — как бы это банально не звучало.
Пример удаления подсказки в input
Результат удаления подсказки в input
Как отключить подсказки в input через css!?
Для того, чтобы отключить подсказки через css вам потребуется:
Поле input возьмем из предыдущего пункта:
Через css можно сделать подсказку невидимой.
hide_hint + стили для подсказки + color: transparent
Соберем код input
Код отключенной подсказки через css
Пример отключения подсказки через css
Расположим выше приведенный код отключения подсказки в input прямо здесь:
Как видим. подсказка отлично отключилась(верене. её просто не видно!)
Как сделать подсказки для полей ввода HTML — атрибут placeholder для input, select, textarea
28.07.18 ИТ / HTML 11381
При добавлении полей ввода на страницы сайта для них необходимо указывать вспомогательный текст – подсказки, которые объясняют предназначение полей. Раньше такие подсказки обычно делались просто путем добавления строки текста выше над полем, но можно было встретить самописные решения, которые выполняли роль нового атрибута 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.