Что такое placeholder в html
Перейти к содержимому

Что такое placeholder в html

  • автор:

Атрибут placeholder HTML тега input

Атрибут placeholder определяет короткую подсказку-«заполнитель», описывающую ожидаемое для ввода значение (например, значение-пример или короткое описание ожидаемого формата). Этот «заполнитель» отображается в текстовом поле до того, как пользователь начнет вводить данные.

Атрибут placeholder работает со следующими типами элемента : text, search, url, tel, email, password.

Атрибут placeholder для тега был добавлен в HTML5.

Синтаксис атрибута
Значения атрибута
Значение Описание
текст Подсказка-«заполнитель», описывающая ожидаемое значение для ввода
Пример использования атрибута

HTML форма с двумя текстовыми полями с «заполнителями»:

Псевдоэлемент ::placeholder

Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.

Синтаксис

Селектор::placeholder
Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Пример

Результат примера показан на рис. 1.

Использование ::placeholder

Рис. 1. Использование ::placeholder

Примечание

Internet Explorer использует псевдокласс :-ms-input-placeholder .

Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder .

Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder .

Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder .

Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder .

Браузеры

10 12 4 57 15 44 5 10.1 4 19 51
2.1 19 30 4.3 10.3

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

  • Атрибут placeholder
  • Подсказка в поле формы
  • Подсказывающий текст
  • Псевдокласс :placeholder-shown

Практика

Справочник CSS

  • !important
  • ::after
  • ::backdrop
  • ::before
  • ::first-letter
  • ::first-line
  • ::marker
  • ::placeholder
  • ::selection
  • :active
  • :blank
  • :buffering
  • :checked
  • :default
  • :dir
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :focus-within
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :link
  • :muted
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :paused
  • :placeholder-shown
  • :playing
  • :read-only
  • :read-write
  • :required
  • :root
  • :seeking
  • :stalled
  • :target
  • :valid
  • :visited
  • :volume-locked
  • @charset
  • @document
  • @font-face
  • @import
  • @keyframes
  • @media
  • @page
  • @supports
  • @viewport
  • accent-color
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • aspect-ratio
  • backdrop-filter
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size
  • block-size
  • border
  • border-block
  • border-block-color
  • border-block-end
  • border-block-end-color
  • border-block-end-style
  • border-block-end-width
  • border-block-start
  • border-block-start-color
  • border-block-start-style
  • border-block-start-width
  • border-block-style
  • border-block-width
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-start-end-radius
  • border-start-start-radius
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-decoration-break
  • box-shadow
  • box-sizing
  • caption-side
  • caret-color
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • font-family
  • font-kerning
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • gap
  • height
  • hyphenate-character
  • hyphenate-limit-chars
  • hyphens
  • image-rendering
  • justify-content
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-block-size
  • min-height
  • min-width
  • mix-blend-mode
  • object-fit
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-block
  • padding-block-end
  • padding-block-start
  • padding-bottom
  • padding-inline
  • padding-inline-end
  • padding-inline-start
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • pointer-events
  • position
  • quotes
  • resize
  • right
  • row-gap
  • scroll-behavior
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-skip-ink
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-fill-color
  • text-indent
  • text-orientation
  • text-overflow
  • text-shadow
  • text-stroke
  • text-stroke-color
  • text-stroke-width
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index
  • zoom

::placeholder¶

С помощью псевдоэлемента ::placeholder задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder .

Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.

  • ::after
  • ::backdrop
  • ::before
  • ::cue
  • ::first-letter
  • ::first-line
  • ::grammar-error
  • ::marker
  • ::part()
  • ::placeholder
  • ::selection
  • ::slotted()
  • ::spelling-error

Синтаксис¶

1 2 3 4
::placeholder  color: blue; font-size: 1.5em; > 

Спецификация¶

Примечания¶

  • Internet Explorer использует псевдокласс :-ms-input-placeholder .
  • Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder .
  • Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder .
  • Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder .
  • Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder .

Пример 1¶

input placeholder="Type something here!" /> 
1 2 3 4 5
input::placeholder  color: red; font-size: 1.2em; font-style: italic; > 

Пример 2¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
 html> head> meta charset="utf-8" /> title>placeholdertitle> style> body  background: #053f38; > input[type='search']  border: 1px solid #98baba; /* Параметры рамки */ background: transparent; /* Прозрачный фон */ padding: 1px 4px; /* Поля вокруг текста */ color: #fff; /* Цвет текста */ > input[type='search']::-moz-placeholder  color: #ffd595; /* Цвет подсказывающего текста */ > input[type='search']::-webkit-input-placeholder  color: #ffd595; > input[type='search']:-ms-input-placeholder  color: #ffd595; > input[type='search']::-ms-input-placeholder  color: #ffd595; > input[type='search']::placeholder  color: #ffd595; > style> head> body> form action="handler.php"> p> input type="search" placeholder="Поиск по сайту" name="q" /> input type="submit" value="Найти" /> p> form> body> html> 

Использование ::placeholder

См. также¶

  • :placeholder-shown

Ссылки¶

  • Псевдо-элемент ::placeholderMDN (рус.)

::placeholder

В ::placeholder можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе ::first-line .

Примечание: В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.

Синтаксис

Error: could not find syntax for this item

Примеры

Красный текст

HTML
input placeholder="Введите что-нибудь!" /> 
CSS
input::placeholder  color: red; font-size: 1.2em; font-style: italic; > 
Результат

Зелёный текст

HTML
input placeholder="Введите что-нибудь. " /> 
CSS
input::placeholder  color: green; > 
Результат

Проблемы доступности

Цветовой контраст

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

Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

  • WebAIM: Color Contrast Checker
  • MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
  • Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Использование

Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.

Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby (en-US) для программного связывания элемента с подсказкой.

В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют aria-describedby для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.

label for="user-email">Ваш email адресlabel> span id="user-email-hint" class="input-hint">Пример: jane@sample.comspan> input id="user-email" aria-describedby="user-email-hint" name="email" type="email" /> 

Режим высокой контрастности Windows

Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.

Метки

Placeholder не является заменой элемента . Без метки, которая программно связывается с формой с помощью for и id атрибутов, такие программы, как скринридеры не смогут анализировать элементы .

  • MDN Basic form hints (en-US)
  • Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Спецификации

Specification
CSS Pseudo-Elements Module Level 4
# placeholder-pseudo

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Псевдокласс :placeholder-shown , который позволяет применять стили к элементу с активным placeholder.
  • Связанные HTML-элементы: , (en-US)
  • HTML-формы

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *