Верстка форм

Навіщо потрібні форми?

Форми — спосіб отримати дані від користувача: ім'я, email, повідомлення, вибір опцій тощо.

• Текстові поля — <input> (однорядкове), <textarea> (багаторядкове).
• Чекбокси — вибір кількох варіантів зі списку.
• Радіокнопки — вибір одного варіанту зі списку.
• Випадаючі списки — <select>.
• Кнопки — відправлення, скидання, дія.

Тег <input> — однорядкове поле

<input> — самозакривний тег. Тип визначається атрибутом type:

Атрибути input

autocomplete — автозаповнення браузером

Атрибут autocomplete підказує браузеру, яку збережену інформацію підставити в поле:

<input type="text" name="fullname" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">

Стилізація input

<input> можна стилізувати як будь-який блочний елемент:

.field {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
}

accent-color — стилізація чекбоксів та радіокнопок

Раніше змінити колір чекбокса або радіокнопки було неможливо без хаків. Сучасна властивість accent-color вирішує це одним рядком:

/* Усі інтерактивні елементи — в кольорах бренду */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: #e53935;
}

Тег <textarea> — багаторядкове поле

• На відміну від <input>, має закривний тег: <textarea>...</textarea>.
• Текст між тегами — значення за замовчуванням.
• Користувач може змінювати розмір (перетягування кутка).

Обмеження розміру

textarea.field {
    min-width: 250px;
    max-width: 100%;
    min-height: 100px;
    max-height: 300px;
    font-family: inherit;  /* без цього — моноширинний шрифт! */
}

Кнопки <button>

Три типи кнопок:

Стилізація кнопки

.button {
    padding: 12px 24px;
    border: none;
    background-color: #e53935;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;  /* лапка при наведенні */
    border-radius: 4px;
}

Тег <label> — підпис поля

<label> — семантичний елемент, що зв'язує текст підпису з полем введення.

Два способи зв'язування

1. Обгортка — input всередині label:

<label>
    <span class="hint">Ваше ім'я</span>
    <input type="text" class="field">
</label>

2. Атрибут for + id — label окремо від input:

<label for="user-email">Email</label>
<input type="email" id="user-email" class="field">

Тег <form>

<form> об'єднує поля в єдину форму. Без нього кнопка submit не працюватиме.

<form action="/api/contact" method="POST">
    <label>
        <span class="hint">Ім'я</span>
        <input type="text" name="username" required>
    </label>
    <button type="submit">Надіслати</button>
</form>

Валідація полів

HTML має вбудовані валідатори — перевірки перед відправленням форми:

Стани :focus та :hover

:focus — поле у фокусі

Коли користувач клікнув на поле або перейшов клавішею Tab:

.field:focus {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

:focus-visible — фокус тільки з клавіатури

Проблема :focus: outline з'являється і при кліку мишею, що дратує дизайнерів. Рішення — :focus-visible:

/* Прибираємо outline при кліку мишею */
.field:focus {
    outline: none;
}

/* Показуємо outline тільки при навігації клавіатурою */
.field:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

:hover — наведення мишею

.field:hover {
    border-color: #666;
}

Властивість outline

outline — обведення навколо елемента, яке не впливає на розміри та розкладку.

Групування селекторів

Якщо кілька елементів мають однакові стилі, їх селектори можна перелічити через кому:

/* Замість дублювання: */
.field:focus,
.button:focus {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* Однакові шрифти для заголовків: */
h1,
h2,
h3 {
    font-family: "Segoe UI", sans-serif;
}

Структура форми: повний приклад

<form class="contact-form" action="/api/contact" method="POST">
    <div class="form-row">
        <label class="form-group">
            <span class="form-hint">Ваше ім'я</span>
            <input type="text" class="field"
                   name="username" placeholder="Іван Петренко" required>
        </label>
    </div>

    <div class="form-row">
        <label class="form-group">
            <span class="form-hint">Email</span>
            <input type="email" class="field"
                   name="email" placeholder="name@example.com" required>
        </label>
    </div>

    <div class="form-row">
        <label class="form-group">
            <span class="form-hint">Повідомлення</span>
            <textarea class="field"
                      name="message" placeholder="Ваше повідомлення..." required></textarea>
        </label>
    </div>

    <div class="form-row">
        <button type="submit" class="button">Надіслати</button>
    </div>
</form>

/* CSS для відступів між рядками форми */
.form-row:nth-child(n+2) {
    margin-top: 20px;
}

.form-hint {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

Налагодження станів у DevTools

У DevTools (інспекторі браузера) є панель :hov, яка дозволяє емулювати псевдостани:

1. Виділіть елемент у вкладці Elements.
2. Натисніть кнопку :hov (у панелі Styles).
3. Увімкніть :focus, :hover, :active тощо.
4. Стилі цього стану стануть видимими та редагованими.

Підсумок