Создание подсказки в пустом текстовом поле HTML: Ajax поиск

Быстрый ответ

Чтобы в текстовом поле отображалась подсказка, нужно используйте атрибут placeholder в элементе <input> таким образом:

<input type="text" placeholder="Введите текст...">

Таким образом, вводимый в поле текст "Введите текст..." будет отображаться серым цветом.

Объяснение атрибута placeholder

Атрибут placeholder — это встроенный инструмент HTML5, предназначенный для отображения подсказок пользователя в полях форм. Он экономит место и предоставляет указания прямо в поле ввода, которые исчезают, когда пользователь начинает вводить данные.

Настройка стиля placeholder через CSS

Если стандартное отображение подсказки вас не устраивает, CSS позволяет изменить его:

::placeholder {
  color: #3fa9f5; /* Текст подсказки мы сделаем синим */
  font-style: italic; /* И используем курсив для придания элегантности */
}

Совместимость с различными браузерами

Атрибут placeholder поддерживается не всеми браузерами, однако можно использовать JavaScript или jQuery-плагины, вроде jQuery HTML5 Placeholder, чтобы достичь аналогичного поведения в устаревших браузерах.

Визуализация

Представьте placeholder как временную метку:

Если коробка пуста, на ней висит ярлык:

[ 📦 "Заполните меня..."  ]

Он остаётся, пока коробку не заполнят.

Уже начат ввод:

Коробка заполнена, метка больше не требуется:

[ 📦🧸 "Теперь здесь моя игрушка!"  ]

Ярлык (placeholder) ушел.

В рамках HTML это выглядит так:

<input type="text" placeholder="Заполните меня...">

Таким образом получается аккуратный и функциональный элемент формы, где подсказки не отвлекают пользователя.

Продвинутый пример использования Ajax

Хотите добавить динамизма к функции поиска? Рассмотрите использование Ajax! Современные решения позволяют обходиться без классической кнопки "Отправить".

Разработка с учетом mobile-first

Не забывайте, что универсального решения нет: и поле ввода, и текст подсказки должны гармонично масштабироваться в зависимости от размера экрана устройства.

Доступность: больше, чем просто дизайн

Дизайн важен, но еще более важно обеспечить удобство использования для всех, включая пользователей скринридеров. Создавая формы, используйте правильную разметку для доступности, не ограничиваясь исключительно визуальной привлекательностью.

Полезные материалы

1. MDN Web Docs – Элемент Input – подробное описание атрибута placeholder в HTML.
2. W3Schools – Атрибут HTML input placeholder – наглядное руководство по использованию атрибута placeholder HTML.
3. Stack Overflow – Как изменить цвет текста подсказки в HTML с помощью CSS – советы по настройке подсветки подсказки в контексте общего дизайна.
4. HTML Standard – официальная спецификация HTML для атрибута placeholder.
5. Can I Use – Поддержка атрибута placeholder – данные о поддержке placeholder различными браузерами.
6. Medium – Как правильно использовать текст подсказки – статья о лучших практиках UX с использованием текстовых подсказок.