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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: '::placeholder'
slug: 'Web/CSS/::placeholder'
tags:
- '::placeholder'
- CSS
- Псевдоэлемент
translation_of: 'Web/CSS/::placeholder'
---
<div>{{CSSRef}}</div>
<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::placeholder</code></strong> представляет собой <a href="/ru/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">текст placeholder</a> в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.</p>
<pre class="brush: css no-line-numbers notranslate">::placeholder {
color: blue;
font-size: 1.5em;
}</pre>
<p>В <code>::placeholder</code> можно использовать только те CSS свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.</p>
<div class="note">
<p><strong>Note:</strong> В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светлосерый текст.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<h3 id="Красный_текст">Красный текст</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Введите что-нибудь!"></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">input::placeholder {
color: red;
font-size: 1.2em;
font-style: italic;
}</pre>
<h4 id="Результат">Результат</h4>
<p>{{EmbedLiveSample("Красный_текст", 200, 60)}}</p>
<h3 id="Зелёный_текст">Зелёный текст</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Введите что-нибудь..."></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate">input::placeholder {
color: green;
}
</pre>
<h4 id="Результат_2">Результат</h4>
<p>{{EmbedLiveSample("Зелёный_текст", 200, 60)}}</p>
<h2 id="Проблемы_доступности">Проблемы доступности</h2>
<h3 id="Цветовой_контраст">Цветовой контраст</h3>
<h4 id="Контрастность">Контрастность</h4>
<p>Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.</p>
<p>Важно обеспечить достаточный цветовой контраст между placeholder и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.</p>
<p>Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.</p>
<ul>
<li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li>
<li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h4 id="Использование">Использование</h4>
<p>Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в {{htmlelement("input")}} элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.</p>
<p>Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать <code><a href="/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> для программного связывания {{HTMLElement("input")}} элемента с подсказкой.</p>
<p>В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют <code>aria-describedby</code> для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.</p>
<pre class="brush:html line-numbers language-html notranslate"><label for="user-email">Ваш email адрес</label>
<span id="user-email-hint" class="input-hint">Пример: jane@sample.com</span>
<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
</pre>
<ul>
<li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
</ul>
<h3 id="Режим_высокой_контрастности_Windows">Режим высокой контрастности Windows</h3>
<p>Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в <a href="/ru/docs/Web/CSS/-ms-high-contrast">режиме высокой контрастности Windows</a>. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.</p>
<ul>
<li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li>
</ul>
<h3 id="Метки">Метки</h3>
<p>Placeholder не является заменой элемента {{htmlelement("label")}}. Без метки, которая программно связывается с формой с помощью {{htmlattrxref("for", "label")}} и {{htmlattrxref("id")}} аттрибутов, такие программы, как скринридеры не смогут анализировать элементы {{htmlelement("input")}}.</p>
<ul>
<li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li>
<li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
</ul>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
<td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
<td>Первоначальное описание.</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div>
<p>{{Compat("css.selectors.placeholder")}}</p>
</div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Псевдокласс {{cssxref(":placeholder-shown")}}, который позволяет применять стили к элементу с <em><strong>активным </strong></em>placeholder.</li>
<li>Связанные HTML элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
<li><a href="/ru/docs/Learn/HTML/Forms">HTML-формы</a></li>
</ul>
|
