Оформление полей формы

Под часами работы мы добавили форму обратной связи: имя, адрес электронной почты, сообщение и кнопка «Отправить». У кнопки «Отправить» уже те же классы, что и у кнопки Тигра.

Но где же поля? Подписи на месте, а самих полей не видно. Щёлкните чуть ниже подписи «Имя» и введите что-нибудь: поле там есть, оно просто невидимо. Это работает Preflight, базовые стили Tailwind. Так же как он убирает внешние отступы у абзацев и особый вид у заголовков, он убирает рамку и фон у полей форм, чтобы каждое поле начиналось «с чистого листа», а оформляли его вы сами.

Полю нужна как минимум рамка, чтобы было видно, куда щёлкать, и внутренний отступ, чтобы текст не прилипал к рамке. Все нужные для этого классы вы знаете из предыдущих уроков:

<input type="text" id="name" name="name" class="w-full rounded-lg border border-stone-300 px-3 py-2">

• w-full — поле такой же ширины, как форма,
• rounded-lg — скруглённые углы,
• border border-stone-300 — светло-серая рамка толщиной 1 px,
• px-3 py-2 — внутренний отступ 12 px слева и справа и 8 px сверху и снизу.

Поле textarea для сообщения получает те же классы, что и два элемента input.

Пустое поле может показывать и подсказку: текст его атрибута placeholder. Он появляется в поле более светлым цветом и исчезает, как только вы начинаете печатать. Это хорошее место для примера того, что нужно ввести, например placeholder="anna@example.com". Но подпись он не заменяет: подпись остаётся на виду, пока вы печатаете, а подсказка — нет.

Цвет подсказки задаёт вариант placeholder:. Он работает так же, как варианты для состояний: placeholder:text-stone-400 окрашивает только подсказку, а не текст, который вводят люди. В CSS подсказка — это псевдоэлемент ::placeholder: часть элемента, которую можно оформлять отдельно. (Preflight окрашивает подсказку в цвет текста, только наполовину прозрачный. Цвет из палитры лучше подходит к остальной странице.)