Условие
В index.html соберите форму: подпись «Имя», связанное с ней текстовое поле и кнопку «Отправить». Подпись и поле должны быть связаны - клик по «Имя» ставит курсор в поле. У вас должно получиться так же, как во вкладке «Результат».
Что нужно сделать
- Соберите форму на странице.
- Добавьте подпись «Имя» и текстовое поле, связанные между собой.
- Добавьте кнопку отправки с текстом «Отправить».
Подсказка для новичка
Пишите код под комментарием «Пишите код здесь». Как связать подпись с полем - в Дополнительной информации.
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Форма: подпись «Имя», поле ввода и кнопка «Отправить»
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Теги и свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень;lang="ru"- язык русский.<head>,<meta charset="UTF-8" />,<title>,<link>- служебная часть и подключение CSS.<body>- видимое содержимое; сюда собираете форму.<form>,<label>,<input>,<button>- теги формы (добавляете вы).- Атрибуты:
for,id,type,name. - В CSS уже есть:
font-family,margin,background,max-width,padding,border,display,width,box-sizing,color.
Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили формы, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
В стартовом CSS есть правила для
body,
form,
label,
input
и
button.
Менять CSS не нужно - как только теги появятся в HTML, стили применятся сами.
Правило body
-
font-family: Arial, sans-serif- шрифт страницы: Arial или запасной рубленый. -
margin: 16px- внешний отступ 16px со всех сторон. -
background: #f8fafc- светлый фон страницы (HEX#f8fafc).
Правило form
-
max-width: 320px- форма не шире 320px (на широком экране не растягивается на всю ширину). -
padding: 16px- внутренний отступ 16px внутри формы. -
background: #fff- белый фон формы. -
border: 1px solid #cbd5e1- тонкая серо-голубая рамка вокруг формы.
Правило label
-
display: block- подпись занимает всю ширину строки (поле окажется под ней, а не рядом). -
margin-bottom: 6px- небольшой отступ снизу до поля ввода.
Правило input
-
display: block- поле на отдельной строке. -
width: 100%- ширина поля на всю ширину формы (с учётомbox-sizing). -
margin-bottom: 12px- отступ снизу до кнопки. -
padding: 8px- внутренний отступ внутри поля (текст не прилипает к краям). -
box-sizing: border-box- ширина100%уже включает padding и border (поле не «вылезет» за край формы).
Правило button
-
padding: 8px 14px- внутренние отступы: сверху/снизу 8px, слева/справа 14px. -
background: #2563eb- синий фон кнопки. -
color: #fff- белый цвет текста на кнопке. -
border: 0- без рамки (кнопка выглядит как залитый прямоугольник).
Формы - связка label и input
Главное правило этой задачи: подпись и поле должны быть
связаны.
Значение
for
у
label
= значение
id
у
input
(например оба
name).
Так удобнее кликать и так требуют проверки доступности.
-
Сначала
<form>и<label>, потом<input>и<button type="submit">. -
Все эти теги должны быть
внутри
form.
Коротко:
соберите
form
→
label for="name"
→
input id="name" type="text" name="name"
→
button type="submit".
Стили формы, поля и кнопки уже прописаны в
style.css.
Сверьте с вкладкой
«Результат».