Підказка placeholder в HTML

Вивчаємо атрибут placeholder для створення підказок у полях введення HTML-форм.

Підказка placeholder в HTML

Атрибут placeholder додає підказку всередині поля введення. Цей текст показується користувачу до того моменту, поки він не почне вводити свої дані.

Placeholder часто використовують у формах для пояснення, що саме потрібно ввести у поле.

Синтаксис placeholder

<input 
  type="text" 
  placeholder="Введіть ваше ім'я"
>

Текст, який знаходиться у placeholder, не є значенням поля. Він автоматично зникає після початку введення.

Приклад форми

<form>

  <label>
    Ім'я:
  </label>

  <input 
    type="text"
    placeholder="Наприклад: Андрій"
  >

  <br><br>

  <label>
    Email:
  </label>

  <input
    type="email"
    placeholder="example@mail.com"
  >

</form>

Placeholder у textarea

Атрибут placeholder також можна використовувати у багаторядкових полях textarea.

<textarea
  placeholder="Напишіть ваше повідомлення..."
></textarea>

❗ Важливо:

Placeholder не замінює label. Для доступності краще використовувати label разом із placeholder.

Практичне завдання

📌 Завдання:

№1. Створіть поле input для імені.
№2. Додайте placeholder з прикладом введення.
№3. Створіть поле email з власною підказкою.

<!-- Початковий код -->

<form>

  <input type="text">

  <input type="email">

</form>

💡 Показати підказку

Placeholder задається прямо всередині HTML-тега через атрибут placeholder="текст підказки".

✅ Показати відповідь

<form>

  <input
    type="text"
    placeholder="Ваше ім'я"
  >

  <br><br>

  <input
    type="email"
    placeholder="Ваш email"
  >

</form>