Условие
В index.html соберите форму регистрации. Внутри формы - одна группа полей с заголовком группы «Регистрация» (не обычный абзац над полями - именно заголовок группы). Какие теги брать - в Дополнительной информации.
В группе четыре обязательных поля. У каждого - своя подпись, связанная с полем (клик по «Имя» ставит курсор в поле имени и т.д.):
- «Имя» - обычное текстовое поле (это первое поле формы, его нельзя пропускать);
- «Email» - поле для электронной почты;
- «Пароль» - поле пароля, минимальная длина 6 символов;
- «Телефон» - поле телефона.
Ниже полей - обязательный чекбокс с подписью «Согласен» и кнопка отправки «Зарегистрироваться». Ориентир по виду - вкладка «Результат» (там сверху группы видно подпись «Имя» и поле под ней).
Что нужно сделать
- Соберите форму и внутри - группу полей с заголовком «Регистрация».
- Добавьте четыре поля с подписями и связью подпись↔поле: «Имя», «Email», «Пароль», «Телефон»; все обязательные.
- Добавьте обязательное согласие «Согласен» и кнопку «Зарегистрироваться» .
Подсказка для новичка
Пишите код под комментарием «Пишите код здесь». Какие теги взять - в Дополнительной информации.
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Регистрация: имя, email, пароль, телефон, согласие
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Теги и свойства этой задачи
- Каркас:
<!DOCTYPE html>,<html lang="ru">,<head>,<meta charset="UTF-8" />,<title>,<link>,<body>. <form>,<fieldset>,<legend>- форма и группа полей.<label>,<input>типовtext,email,password,tel,checkbox.- Атрибуты:
for,id,type,name,required,minlength. <button type="submit">- кнопка регистрации.- В CSS:
font-family,margin,background,max-width,padding,border,font-weight,display,width,box-sizing,border-radius,color,appearance,margin-right,margin-top.
Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили регистрации, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
В CSS есть правила для
body,
form,
fieldset,
legend,
label,
текстовых
input[type=…],
чекбокса и
button.
Менять стили не нужно.
Правило body
-
font-family: Arial, sans-serif- шрифт страницы. -
margin: 24px- внешний отступ 24px (чуть больше, чем в простых уроках). -
background: #f8fafc- светлый фон страницы.
Правило form
-
max-width: 360px- форма не шире 360px. -
padding: 16px- внутренний отступ. -
background: #fff- белый фон. -
border: 1px solid #cbd5e1- рамка формы.
Правило fieldset
-
border: 1px solid #94a3b8- заметная рамка группы полей. -
padding: 12px- отступ внутри группы. -
margin: 0 0 12px- снизу 12px до кнопки.
Правило legend
-
font-weight: 700- жирный заголовок группы. -
padding: 0 6px- небольшие боковые отступы у текста legend на рамке.
Правило label
-
display: block- подпись на отдельной строке. -
margin-bottom: 6px- отступ до поля. -
font-weight: 600- полужирные подписи.
Правило текстовых input[type]
Один блок сразу для
text,
email,
password
и
tel:
-
display: block- поле на своей строке. -
width: 100%- на всю ширину группы. -
margin-bottom: 12px- расстояние между полями. -
padding: 8px- внутренний отступ в поле. -
box-sizing: border-box- width включает padding и border. -
border: 1px solid #333- тёмная рамка поля. -
border-radius: 2px- чуть скруглённые углы. -
background: #fffиcolor: #111- белый фон и почти чёрный текст. -
appearance: noneи-webkit-appearance: none- убирают «системный» вид полей в части браузеров, чтобы стиль был одинаковым.
Правило input[type="checkbox"]
-
margin-right: 8px- отступ справа от галочки до текста «Согласен».
Правило button
-
margin-top: 4px- небольшой отступ сверху. -
padding: 8px 14px- размер кликабельной области. -
background: #2563eb- синий фон. -
color: #fff- белый текст. -
border: none- без рамки (то же, чтоborder: 0).
Формы: fieldset, типы полей, required
fieldset
+
legend
группируют поля.
Разные
type
дают разную клавиатуру и проверку.
required
и
minlength
- простая валидация прямо в HTML, без JavaScript.
Коротко:
form
→
fieldset
/
legend
→ поля text / email / password (
minlength="6") / tel → checkbox «Согласен» →
button type="submit".
Все отступы, рамки и цвета полей уже в
style.css.