Атрибут placeholder тега <input> — підказка в полі
Атрибут placeholder вказує коротку підказку, яка описує очікуване значення поля введення (наприклад, значення або короткий опис, що потрібно ввести).
Атрибут placeholder виводить текст всередині поля форми, який зникає при отриманні фокусу або при наборі тексту.
Зазвичай відображається сірим кольором.
автор: с3с
Загальний опис
автор: NagarD
- Нотатка
-
Атрибут заповнювач працює з наступними типами введення: text, search, url, tel, email та password.
автор: с3с
Синтаксис
<input placeholder="text">Атрибут placeholder може отримувати єдине значення:
-
text -
Текстовий рядок. Якщо всередині рядка передбачається пропуск, його необхідно брати в подвійні або одинарні лапки.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 4 | 4 | ≤12.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута placeholder теґа <input>
<form>
<p>З використанням атрибута <code>placeholder</code></p>
Логін: <input type = "text" name = "login" placeholder = "Введіть ваш логін"><br><br>
Пароль: <input type = "password" name = "password" placeholder = "Введіть ваш пароль"><br><br>
<button type = "submit">Відправити</button>
</form>
<br>
<br>
<form>
<p>Без використання атрибута <code>placeholder</code></p>
Логін: <input type = "text" name = "login"><br><br>
Пароль: <input type = "password" name = "password" ><br><br>
<button type = "submit">Відправити</button>
</form>Верхнє поле має видимий підпис, а плейсхолдер лише показує формат; у середньому підпис зникне, щойно почнете писати. Нижнє — type="date", де плейсхолдер не показується взагалі
HTML
<form>
<p class="ok">
<label for="phone">Телефон</label><br>
<input id="phone" type="tel" placeholder="+380 44 123 45 67">
</p>
<p class="bad">
<input type="tel" placeholder="Телефон" aria-label="Телефон">
<small>підпис зникне з першим символом</small>
</p>
<p class="bad">
<input type="date" placeholder="дд.мм.рррр">
<small>у type="date" плейсхолдер ігнорується</small>
</p>
</form>CSS
input {
padding: 0.4rem 0.6rem;
border: 1px solid #99aaaa;
border-radius: 4px;
font: inherit;
}
/* колір і стиль підказки — тільки так, а не через color поля */
input::placeholder {
color: #6b7280;
font-style: italic;
}
/* поле, у якому підказку вже зігнали текстом */
input:not(:placeholder-shown) {
border-color: #2a8a5a;
}
.ok { border-left: 4px solid #2a8a5a; padding-left: 0.6rem; }
.bad { border-left: 4px solid #b1381e; padding-left: 0.6rem; }
small { color: #6b7280; }Різниця між HTML 4.01 та HTML5
Атрибут placeholder з'явився тільки в HTML5.
Коментарі
Коментарів ще немає — будьте першим!