Атрибут placeholder тега <textarea> — підказка поля
Атрибут placeholder вказує коротку підказку, яка описує очікуване значення текстової області.
Текст підказки ховається, коли користувач вводить значення (будь-який символ) в текстове поле, якщо його прибрати, то підказка буде відображена знову.
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<textarea placeholder="text">Атрибут placeholder може отримувати єдине значення:
-
text -
Задає коротку підказку, яка описує очікуване значення текстової області.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 4 | 4 | 5 | ≤12.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 5 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута placeholder теґа <textarea>
<form>
<p>З використанням атрибута <code>placeholder</code></p>
<textarea name = "login" placeholder = "Напишіть повідомлення"></textarea><br><br>
<button type = "submit">Відправити</button>
</form>
<br>
<br>
<form>
<p>Без використання атрибута <code>placeholder</code></p>
<textarea type = "text" name = "login"></textarea><br><br>
<button type = "submit">Відправити</button>
</form>Обидві текстові області написані з однаковим placeholder, але в другій між теґами лишилися перенос рядка й пробіли — і це вже значення поля, тому підказки не видно
HTML
<p class="ok">Порожня — підказку видно:</p>
<textarea rows="3" placeholder="Опишіть проблему кількома реченнями"></textarea>
<p class="bad">Той самий код, але з відступом усередині — підказки немає:</p>
<textarea rows="3" placeholder="Опишіть проблему кількома реченнями">
</textarea>
<p class="ok">А тут текст усередині — навмисне: це початкове значення, воно піде на сервер:</p>
<textarea rows="3" placeholder="Ця підказка не з'явиться ніколи">Дякуємо за замовлення!</textarea>CSS
textarea {
width: 100%;
padding: 0.5rem;
border: 1px solid #99aaaa;
border-radius: 4px;
font: inherit;
resize: vertical;
}
textarea::placeholder {
color: #6b7280;
font-style: italic;
}
.ok { color: #2a8a5a; margin: 1rem 0 0.3rem; }
.bad { color: #b1381e; margin: 1rem 0 0.3rem; }Різниця між HTML 4.01 та HTML5
Атрибут placeholder для тегу textarea з’явився тільки у HTML5.
Коментарі
Коментарів ще немає — будьте першим!