Продвинутые формы

HTML5 предоставляет мощные инструменты для форм: встроённую валидацию (required, pattern, min/max), выпадающие списки (select), области текста (textarea), группировку полей (fieldset) и специальные типы (date, color, range).

Встроенная валидация HTML5:

• required — поле обязательное
• minlength/maxlength — минимальная/максимальная длина
• min/max — минимум/максимум для чисел и дат
• pattern — регулярное выражение для проверки формата
• placeholder — подсказка в поле

Теги форм:

<select> — выпадающий список: <select name="country"> <option value="ru">Россия</option> <option value="kz">Казахстан</option> </select>

<textarea> — многострочное поле: <textarea name="bio" rows="5" cols="40"></textarea>

<fieldset> + <legend> — группировка: <fieldset> <legend>Личные данные</legend> <!-- поля внутри --> </fieldset>

Специальные типы input:

• type="date" — выбор даты
• type="color" — выбор цвета
• type="range" — ползунок
• type="file" — загрузка файла
• type="search" — поиск

Продвинутые формы — как анкета с особыми полями. select — выпадающий список (выберите страну). textarea — место для длинного ответа (опишите себя). fieldset — группа вопросов (личные данные). Валидация — автоматический проверяющий, который не пустит с ошибкой.

**Самый простой:**

<form>
  <label for="age">Возраст:</label>
  <input type="number" id="age" name="age" min="0" max="150" required>

  <label for="birthday">Дата рождения:</label>
  <input type="date" id="birthday" name="birthday">

  <label for="color">Любимый цвет:</label>
  <input type="color" id="color" name="color" value="#3498db">
</form>

Специальные типы: number с ограничениями, date и color.

**Простой:**

<form>
  <fieldset>
    <legend>Контактная информация</legend>

    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" required minlength="2">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </fieldset>

  <fieldset>
    <legend>Сообщение</legend>

    <label for="topic">Тема:</label>
    <select id="topic" name="topic" required>
      <option value="">Выберите</option>
      <option value="question">Вопрос</option>
      <option value="suggestion">Предложение</option>
    </select>

    <label for="msg">Текст:</label>
    <textarea id="msg" name="message" rows="4" required minlength="10"></textarea>
  </fieldset>

  <button type="submit">Отправить</button>
</form>

Форма с fieldset, валидацией и select.

**Реальный пример:**

<form action="/profile" method="POST" enctype="multipart/form-data">
  <fieldset>
    <legend>Профиль пользователя</legend>

    <label for="avatar">Аватар:</label>
    <input type="file" id="avatar" name="avatar" accept="image/*">

    <label for="username">Имя пользователя:</label>
    <input type="text" id="username" name="username"
           required pattern="[a-zA-Z0-9_]{3,20}"
           placeholder="от 3 до 20 символов">

    <label for="website">Сайт:</label>
    <input type="url" id="website" name="website"
           placeholder="https://example.com">

    <label for="bio">О себе:</label>
    <textarea id="bio" name="bio" rows="3"
              maxlength="200" placeholder="Максимум 200 символов"></textarea>

    <label for="level">Уровень:</label>
    <input type="range" id="level" name="level" min="1" max="10" value="5">
  </fieldset>

  <button type="submit">Сохранить</button>
</form>

Полноценная форма профиля: file upload, pattern, url, range.

**Неправильно:** Полагаться только на клиентскую валидацию

**Почему:** Пользователь может обойти HTML-валидацию (через DevTools). Серверная валидация обязательна!

**Правильно:** HTML-валидация — удобство для пользователя. Серверная валидация — безопасность.

**Неправильно:** Забывать name у select/textarea

**Почему:** Как и у input, без name данные не отправятся на сервер.

**Правильно:** Каждое поле формы (input, select, textarea) должно иметь name.

**Неправильно:** Использовать placeholder вместо label

**Почему:** Placeholder исчезает при вводе. Пользователь забудет, что нужно ввести. Скринридеры не читают placeholder.

**Правильно:** Всегда используйте label. Placeholder — дополнительная подсказка, а не замена.

• Встроенная валидация: required, pattern, min/max, minlength/maxlength
• select — выпадающий список, textarea — многострочное поле
• fieldset + legend — группировка полей
• type="file" для загрузки файлов (enctype="multipart/form-data")
• Клиентская валидация — удобство, серверная — безопасность

Назад: Вы знаете основы форм (H11) — продвинутые формы добавляют валидацию и больше типов полей.

Вперёд: В следующем уроке (H13) вы изучите семантическую разметку: header, nav, main, article, section, footer.