Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все 33 занятия, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт
Модуль 1. Введение и HTML Занятие 10

Формы

Сегодня мы сделаем анкету «Мои интересы» с полями ввода, списком выбора и кнопкой.

Изучаем: form, input, label, textarea, select, button
Результат: Анкета «Мои интересы»

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

👀 Сегодня сделаем вот такое

Показать код примера 
<h1>Мои интересы</h1>
<form>
  <p>
    <label for="name">Имя:</label><br>
    <input type="text" id="name" placeholder="Например, Лиза" required>
  </p>
  <p>
    <label for="subject">Любимый предмет:</label><br>
    <select id="subject">
      <option>Информатика</option>
      <option>Биология</option>
      <option>История</option>
    </select>
  </p>
  <p>
    Увлечения:<br>
    <label><input type="checkbox"> Спорт</label>
    <label><input type="checkbox"> Музыка</label>
  </p>
  <p>
    <label for="about">О себе:</label><br>
    <textarea id="about" rows="3"></textarea>
  </p>
  <button type="submit">Отправить</button>
</form>

💡 Объяснение

Зачем сайтам формы

Форма — это способ, которым сайт получает данные от человека. Поиск в Яндексе, вход в электронный дневник, заказ пиццы, опрос, комментарий — всё это формы. Бумажный аналог — анкета или бланк, где есть поля для заполнения.

HTML отвечает за то, как форма выглядит и какие в ней поля. А вот чтобы данные куда-то отправились и сохранились, нужна программа на сервере — этому учатся позже. Поэтому наши анкеты пока «учебные»: их можно заполнить, но данные никуда не уходят.

Контейнер <form>

Все поля формы лежат внутри <form>. У настоящих форм есть атрибуты action (куда отправить) и method (как отправить), но для учебных анкет они не нужны.

Поле ввода <input>

<input> — одиночный тег, самый «многоликий» в HTML. Его вид полностью меняет атрибут type:

  • type="text" — строка текста (имя, город);
  • type="email" — почта: браузер проверит, что есть @;
  • type="password" — пароль, символы скрыты точками;
  • type="number" — число, со стрелочками; можно ограничить min и max;
  • type="date" — выбор даты в календарике;
  • type="color" — выбор цвета из палитры;
  • type="range" — ползунок;
  • type="checkbox" — флажок: можно отметить несколько вариантов;
  • type="radio" — переключатель: можно выбрать только один вариант из группы. Все переключатели одной группы должны иметь одинаковый name.

Подпись <label>

У каждого поля должна быть подпись, иначе непонятно, что туда вводить. Подпись делается тегом <label> и связывается с полем:

<label for="city">Город:</label>
<input type="text" id="city">

Атрибут for у подписи должен совпадать с id поля. Что это даёт:

  • клик по подписи ставит курсор в поле (особенно удобно для маленьких флажков — можно нажать на слово);
  • программа чтения с экрана назовёт поле: «Город, поле ввода».

Второй способ — положить поле прямо внутрь подписи: <label><input type="checkbox"> Спорт</label>. Тогда for и id не нужны.

Другие элементы формы

  • <textarea> — большое поле для длинного текста. Парный тег. Размер задают атрибуты rows (строки) и cols (столбцы).
  • <select> с <option> внутри — выпадающий список. Экономит место, когда вариантов много.
  • <button> — кнопка. type="submit" отправляет форму, type="reset" очищает её.
  • <fieldset> и <legend> — рамка с названием, группирует связанные поля (например, «Контакты»).

Полезные атрибуты

  • placeholder="Например, Лиза" — серая подсказка внутри пустого поля. Она исчезает при вводе, поэтому не заменяет label.
  • required — обязательное поле: браузер не отправит форму, пока его не заполнят.
  • checked — флажок или переключатель отмечен заранее.
  • value — значение по умолчанию.

Как выбрать тип поля

Один вариант из нескольких и их мало (2–5) → radio. Много вариантов → select. Можно выбрать несколько → checkbox. Короткий ответ → input text. Длинный рассказ → textarea.

Безопасность

Прежде чем вводить что-то в форму на чужом сайте, подумай: зачем им эти данные? Никогда не вводи пароли, адрес, телефон и данные карты родителей на незнакомых сайтах и в «конкурсах с призами». А в своих анкетах не спрашивай у посетителей личную информацию.

Частые ошибки

  • for и id не совпадают — клик по подписи не работает.
  • У radio разные name — можно выбрать все варианты сразу.
  • Placeholder вместо label.
  • <textarea/> без закрывающего тега — весь код ниже попадает внутрь поля.

Проверь себя

  1. Чем checkbox отличается от radio?
  2. Как связать подпись с полем?
  3. Какое поле подойдёт для выбора класса из списка 5А–11Б?

⌨️ Практика

  1. Добавь поле «Имя» с label и placeholder.
  2. Сделай выпадающий список «Любимый предмет» из 4 вариантов.
  3. Добавь три checkbox «Чем увлекаюсь»: спорт, музыка, рисование.
  4. Добавь textarea «О себе» и кнопку «Отправить».

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход