Урок 18 · CSS

Поле, подпись и кнопка в одну колонку

Форма читается, когда подпись стоит у своего поля, а поля имеют одну ширину.

Почему это следующий шаг

Меню готово. Форма из HTML-урока всё ещё выглядит системным набором серых полосок.

Как сделать

Ставь подпись над полем, а не слева на узком экране. Полю задай ширину 100%, padding и рамку. Фокус поля покажи обводкой или цветом рамки. Кнопку отправки прижми к левому краю колонки, не растягивай её на всю форму без причины. Сообщение об ошибке — обычный текст под полем, не только красная рамка.

label { display: grid; gap: 0.35rem; }
input, textarea { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid #cfc6b8; border-radius: 8px; }
input:focus-visible { outline: 3px solid #d38b2c; }

Что проверить

• Подпись видна до ввода, а не только внутри поля.
• Поля одной ширины.
• Ошибка названа словами.