Анкета с двумя fieldset

СЛОЖНЫЙ

Задача #21 · Формы

Условие

В index.html соберите форму-анкету из двух групп полей с заголовками групп «Контакты» и «Профиль». Теги групп и полей - в Дополнительной информации.

Группа «Контакты». Три обязательных поля, у каждого подпись, связанная с полем: «Имя» (текст), «Email», «Телефон». У телефона задайте шаблон: начинается с +7, затем ровно 10 цифр - в атрибуте это выглядит как +7[0-9]{10}.

Группа «Профиль». Выпадающий список «Роль» с вариантами «Студент» и «Наставник» (обязательный). Два переключателя уровня с общим именем группы level и значениями junior / middle (хотя бы один обязательный). Многострочное поле «О себе» с лимитом 200 символов (обязательное).

Ниже групп - обязательный чекбокс согласия и кнопка «Отправить анкету». Ориентир - вкладка «Результат».

Что нужно сделать

Создайте <form> и две группы <fieldset> с заголовками <legend>: «Контакты» и «Профиль».
В «Контакты»: обязательные поля Имя (text), Email, Телефон (tel) - у каждого label связан с полем через for/id. У телефона pattern="+7[0-9]{10}".
В «Профиль»: выпадающий список «Роль» (Студент / Наставник), два radio с name="level" (junior / middle), многострочное «О себе» с maxlength="200".
Ниже групп: обязательный чекбокс «Согласен» и кнопка «Отправить анкету». Сверьте с вкладкой «Результат».

Подсказка для новичка

Пишите под комментарием «Пишите код здесь». У каждой пары подпись+поле - одинаковая связь. Переключатели уровня объединяет одно имя группы. Какие теги у группы, списка и многострочного поля - в Дополнительной информации.

Стартовый код

Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.

Вот так должно получиться

Контакты + Профиль · согласие · отправка

Контакты Имя Email Телефон

Профиль Роль Уровень · Junior / Middle О себе

Согласен

Как пользоваться IDE

Предпросмотр — как выглядит ваша страница.
Результат — какой итог должен получиться.
Описание задачи — полное условие и справка.
Задание — краткие шаги 1–2–3 снизу.
Помощник — подсказки по шагам.
Черновик — ссылка на ваш код.
Сброс кода — стартовый шаблон.

Теги и свойства этой задачи

Каркас: <!DOCTYPE html>, <html lang="ru">, <head>, <meta>, <title>, <link>, <body>.
<form>, два <fieldset> с <legend>.
Поля: input (text, email, tel, radio, checkbox), select/option, textarea, button.
Атрибуты: for, id, type, name, value, required, pattern, maxlength.
В CSS: font-family, margin, background, max-width, padding, border, display, font-size, width, box-sizing, margin-bottom, margin-top, color, font-weight.

Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили анкеты, менять не нужно). Ниже - разбор стилей и важных деталей задачи.

Файл `style.css` - что уже написано

В CSS оформлены body, form, fieldset, label, p, общие правила для input, select, textarea, button, отдельно radio/checkbox и кнопка. Менять CSS не нужно.

Правило `body`

font-family: Arial, sans-serif - шрифт.
margin: 16px - отступ страницы.
background: #f1f5f9 - фон страницы.

Правило `form`

max-width: 420px - анкета не шире 420px.
padding: 16px - внутренний отступ.
background: #fff - белый фон.
border: 1px solid #cbd5e1 - рамка формы.

Правило `fieldset`

margin: 0 0 12px - отступ снизу между группами.
padding: 10px - внутренний отступ группы.
border: 1px solid #e2e8f0 - светлая рамка fieldset.

Правило `label, p`

display: block - подписи и абзац «Уровень» на отдельной строке.
margin: 8px 0 4px - отступы сверху/снизу у подписей.
font-size: 14px - размер текста подписей.

Правило `input, select, textarea, button`

width: 100% - контролы на всю ширину формы.
box-sizing: border-box - width включает padding и border.
margin-bottom: 6px - небольшой зазор между контролами.

Правило `input[type="radio"], input[type="checkbox"]`

width: auto - галочки и кружки не растягиваются на 100% (иначе выглядят огромными).

Правило `button`

margin-top: 8px - отступ сверху от согласия.
padding: 8px 12px - внутренние отступы кнопки.
background: #2563eb - синий фон.
color: #fff - белый текст.
border: 0 - без рамки.
font-weight: 700 - жирный текст кнопки.

Анкета: select, radio, textarea, pattern

Здесь собраны разные контролы одной формы. select - выбор из списка, radio с общим name - один вариант, textarea - длинный текст, pattern - маска для телефона без JavaScript. Два fieldset разделяют «Контакты» и «Профиль».

Коротко: два fieldset → контакты (text/email/tel+pattern) → профиль (select, radio, textarea) → checkbox → submit. Ширина полей, отступы fieldset и стиль кнопки уже в style.css. Сверьте с «Результат».

Задание Переместить налево

Соберите форму-анкету из двух групп полей «Контакты» и «Профиль». У каждого поля - подпись и обязательность. Как должно выглядеть - смотрите вкладку «Результат»; подробности тегов - во вкладке «Описание задачи».

Задачи:

Две группы: форма с fieldset «Контакты» и «Профиль» (заголовки через legend). В «Контакты» - Имя, Email, Телефон с связанными label.
Профиль: выпадающая «Роль» (Студент / Наставник), radio уровня name="level" (junior / middle) и «О себе» (textarea, лимит 200).
Телефон + отправка: у телефона шаблон pattern="+7[0-9]{10}", ниже групп - обязательный чекбокс «Согласен» и кнопка «Отправить анкету».
Сверьте вид с вкладкой «Результат» и нажмите Проверить.

Пишите в index.html. CSS менять не нужно - стили анкеты уже готовы.

Какие теги у группы, списка и многострочного поля - во вкладке «Описание задачи» → «Дополнительная информация».

Автосохранение