Атрибут title тега <input>
Описание
Атрибут title задаёт всплывающую подсказку (tooltip), которая появляется при наведении курсора на элемент <input>. Также используется для улучшения доступности и предоставления дополнительной информации.
<!-- Поле с подсказкой -->
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username"
title="Введите ваше имя пользователя (3-15 символов)">
Основные применения:
| Сценарий | Пример | Польза |
|---|---|---|
| Пояснение формата | title="ДД.ММ.ГГГГ" |
Помощь в правильном вводе |
| Дополнительная информация | title="Обязательное поле" |
Уточнение требований |
| Доступность | title="Поиск по каталогу" |
Помощь для скринридеров |
| Валидация | pattern="\d+" title="Только цифры" |
Сообщение об ошибке |
Пример с валидацией:
<label for="zip">Почтовый индекс:</label>
<input type="text" id="zip" name="zip"
pattern="\d{6}"
title="Введите 6 цифр почтового индекса"
required>
Рекомендации:
- Делайте подсказки краткими и информативными
- Используйте для пояснения сложных полей
- Сочетайте с
placeholderдля лучшего UX - Дублируйте важную информацию в видимом тексте
- Проверяйте отображение на мобильных устройствах
Пример с иконкой и подсказкой:
<style>
.info-icon {
display: inline-block;
width: 16px;
height: 16px;
background-color: #2196F3;
color: white;
border-radius: 50%;
text-align: center;
cursor: help;
}
</style>
<label for="discount">
Промокод
<span class="info-icon" title="Введите код скидки из письма или SMS">?</span>:
</label>
<input type="text" id="discount" name="discount">
Ограничения:
- На мобильных устройствах подсказки могут не отображаться
- Не заменяет видимые подписи и инструкции
- Слишком длинные подсказки могут плохо отображаться
- Время появления зависит от браузера
Примечание: Атрибут title - это полезный инструмент для улучшения пользовательского опыта, но не следует полагаться на него как на единственный источник информации. Важные инструкции должны быть видны постоянно, а не только при наведении курсора.