placeholder: пример ввода без подмены подписи

Назначение

Атрибут placeholder показывает короткую подсказку в пустом поле, например пример ожидаемого формата.

Как это работает

При вводе значения подсказка исчезает, поэтому название поля и важные ограничения должны находиться в постоянном label или отдельном описании. Placeholder не является начальным значением и не отправляется вместо пустой строки.

Пример

<label for="project">Название проекта</label>
<input id="project" name="project" placeholder="Например, Вебсправ" aria-describedby="project-hint">
<p id="project-hint">Короткое название, которое увидят читатели.</p>

Что должно получиться

Название и пояснение остаются видимыми после ввода. Пример помогает начать заполнение, но не подменяет настоящее значение поля.

Граница применения и частая ошибка

Не используйте placeholder как единственную подпись. Слабый контраст и исчезновение текста затрудняют заполнение; обязательность также нужно обозначать отдельно.

Самостоятельная проверка

Введите данные, чтобы подсказка пропала. Проверьте, что назначение поля всё ещё ясно. Добавьте постоянное описание формата и свяжите его через aria-describedby.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.

Связанные материалы

• Формы HTML
• Элемент input
• Проверка с клавиатуры