HTML формы. Часть 2: выбор и отправка данных

Чтение — около 11 минут· без учёта практики

В предыдущем уроке мы создали подписанные поля имени и почты. Добавим варианты времени прогулки, выбор игрушек и разберём, какие данные получает обработчик.

Переключатели и флажки

Рассмотрим текстовые поля, переключатели, флажки и кнопку отправки внутри формы — анкету для друзей Тони, которые хотят гулять вместе с ним:

Анкета друга Тони

Заполните поля, выберите время и отметьте флажки. Попробуйте выбрать оба переключателя — получится только один, потому что у них общее имя time. Замените у второго переключателя name="time" на name="time2" — теперь можно отметить оба, и группа сломается.

index.html

HTML

<form>
  <p>Ваше имя: <input type="text" name="owner"></p>
  <p>Город: <input type="text" name="city" value="Москва"></p>
  <p>
    Когда удобно гулять:
    <input type="radio" name="time" value="morning" checked> утром
    <input type="radio" name="time" value="evening"> вечером
  </p>
  <p>
    Что любит ваша собака:<br>
    <input type="checkbox" name="ball" value="yes"> мячик<br>
    <input type="checkbox" name="rope" value="yes"> канат<br>
    <input type="checkbox" name="swim" value="yes"> плавать
  </p>
  <p><input type="submit" name="send" value="Отправить"></p>
</form>

По порядку, что мы сделали в этом примере:

Разместили два однострочных текстовых поля (<input type="text">) для ввода имени и города. Присвоили этим полям уникальные имена атрибутом name — для передачи и обработки формы указывайте этот атрибут у каждого поля, данные которого нужно отправить. Полю города атрибутом value задали значение по умолчанию «Москва». Когда пользователь изменит текст, отправится уже его ввод.
Разместили два переключателя (<input type="radio">) для выбора одного из ограниченного числа вариантов. Для переключателей одной группы необходимо указывать одинаковое имя, чтобы можно было выбрать только один вариант из предложенных. Для первого переключателя мы указали атрибут checked: элемент будет выбран при загрузке страницы (в данном случае поле со значением morning). Атрибут применяется только к полям <input type="checkbox"> и <input type="radio">, у остальных он игнорируется.
Разместили три флажка, которые позволяют отметить любые подходящие варианты. Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили отправляемое значение.
Заключительный элемент формы — кнопка отправки (<input type="submit">). У кнопки по аналогии с другими элементами есть имя (атрибут name) и значение (атрибут value). Значение value кнопки — это ещё и надпись на ней.

Обратите внимание: текст рядом с полями пока никак не связан с ними. Если нажать на слово «утром», переключатель не выберется, а программа экранного доступа не сможет назвать поле. Исправьте связь с помощью уже знакомого label; сравнить два способа можно в разделе «Текстовая метка».

Подписи переключателей

Подписи к переключателям

Нажмите на слова «Да» и «Нет» — переключатели выбираются кликом по подписи в обеих группах. Измените у первой подписи for="treat-yes" на for="yes" — связь пропадёт, и клик по «Да» в первой группе перестанет работать.

index.html

HTML

<form>
  <p>Можно угостить Тони лакомством?</p>
  <!-- Подпись связана с полем через for и id -->
  <input type="radio" id="treat-yes" name="treat" value="yes" checked>
  <label for="treat-yes">Да</label>
  <input type="radio" id="treat-no" name="treat" value="no">
  <label for="treat-no">Нет</label>

  <p>Можно погладить Тони?</p>
  <!-- Поле находится внутри label: for и id не нужны -->
  <label><input type="radio" name="pet" value="yes"> Да</label>
  <label><input type="radio" name="pet" value="no" checked> Нет</label>
</form>

В этом примере мы:

В первой группе разместили два переключателя с одинаковым именем treat и разными значениями. Первому переключателю указали атрибут checked: он выбран при загрузке страницы. Каждому переключателю задали уникальный идентификатор атрибутом id, а элементы <label> связали с ними атрибутом for с тем же значением.
Во второй группе поместили переключатели внутрь элементов <label>. В отличие от предыдущего способа нет необходимости указывать переключателям атрибут id, а подписям — атрибут for, чтобы сделать привязку.

В браузере оба способа выглядят и работают одинаково. Способ с for и id удобен, когда подпись и поле находятся в разных местах разметки, например в соседних ячейках таблицы.

Другие типы input

Текстовые типы text, email, password, search, tel, url и кнопку submit мы разобрали в первой части. Ниже — остальные типы полей.

Элемент <input> является основным элементом формы и определяет поле для ввода информации. Это пустой элемент: он записывается одним тегом. Поле принимает различный вид в зависимости от значения атрибута type. В таблице рядом с каждым значением показано поле, которое создаёт ваш браузер, — попробуйте с ним поработать:

Значения атрибута type элемента input
Значение	Описание
`button`	Определяет кнопку без собственного действия. Как правило, используется совместно с языком программирования JavaScript для запуска скрипта.
`checkbox` включено выключено	Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка.
`color`	Элемент управления для выбора цвета (открывает палитру цветов).
`date`	Элемент управления для ввода даты (день, месяц и год) без времени. Дата показывается в формате, привычном для языка браузера, например ДД.ММ.ГГГГ, а отправляется всегда в виде `2026-09-12`.
`datetime-local`	Элемент управления для ввода даты и времени (день, месяц, год, часы и минуты). Часовой пояс не указывается; значение отправляется в виде `2026-09-12T08:30`.
`file`	Элемент управления, который позволяет пользователю выбрать файл.
`hidden`	Определяет скрытое поле: оно не отображается на странице, но его значение отправляется вместе с формой. Поэтому в этой строке таблицы показывать нечего.
`image`	Элемент управления, который определяет графическую кнопку отправки формы (действует как значение `submit`). По аналогии с тегом `<img>` вы должны использовать атрибут `src`, чтобы задать путь к изображению, и атрибут `alt`, чтобы указать альтернативный текст. Для кнопки он описывает действие («Отправить»), а не картинку. Размеры изображения задаются атрибутами `width` (ширина) и `height` (высота).
`month`	Элемент управления для ввода месяца и года без часового пояса; значение отправляется в виде `2026-09`.
`number`	Элемент управления для ввода числа. По умолчанию допустимы целые числа: шаг равен единице. Дробные значения разрешают атрибутом `step`, о нём — в уроке «Элементы формы, добавленные в HTML5».
`radio` выбрано не выбрано	Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределённой группы значений. Элемент, как правило, называют радиокнопка (англ. radio button) или переключатель.
`range`	Элемент управления для ввода числа (регулятор), в котором точное значение не важно. Если атрибуты не указаны, используются значения по умолчанию: `min="0"`; `max="100"`; `value` — середина диапазона, `min + (max - min) / 2`, или `min`, если `max` меньше `min`; `step="1"`.
`reset`	Определяет кнопку сброса содержимого формы к исходным значениям.
`time`	Определяет элемент управления для ввода времени без указания часового пояса (чч:мм).
`week`	Определяет элемент управления для ввода порядкового номера недели в году и самого года; значение отправляется в виде `2026-W37`. Часовой пояс не указывается.

Внешний вид полей зависит от браузера и операционной системы. Типы month и week поддерживаются не во всех браузерах: там, где их нет, браузер показывает обычное текстовое поле. Типы для особых данных — почты, телефона, чисел и дат — подробно разберём в уроке «Элементы формы, добавленные в HTML5». Чаще всего в формах используются типы, которые существуют с самых первых версий HTML:

checkbox (флажок);
radio (переключатель);
submit (кнопка отправки формы);
text (однострочное текстовое поле).

Группировка данных формы

Тег <fieldset> служит для группировки связанных элементов, размещённых внутри формы. Во всех основных браузерах этот элемент выделяется рамкой, а его содержимое получает внутренние отступы со всех сторон.

Тег <legend> определяет заголовок группы и записывается первым внутри <fieldset>. Заголовок не только виден на рамке: программы экранного доступа произносят его вместе с полями группы. Поэтому группу переключателей или флажков удобно оборачивать в <fieldset>: вопрос «Когда удобно гулять» станет названием группы, а «утром» и «вечером» — вариантами ответа.

Группы полей в анкете

Анкета разделена на две группы рамками fieldset, заголовки групп заданы legend. Внешний вид рамки зависит от браузера. Измените текст первого legend на «Пожалуйста, представьтесь» — заголовок на рамке изменится.

index.html

HTML

<form>
  <fieldset>
    <legend>Расскажите о себе</legend>
    <p>Ваше имя: <input type="text" name="owner"></p>
    <p>Город: <input type="text" name="city" value="Москва"></p>
  </fieldset>
  <fieldset>
    <legend>Когда удобно гулять</legend>
    <input type="radio" name="time" value="morning" checked> утром
    <input type="radio" name="time" value="evening"> вечером
  </fieldset>
  <p><input type="submit" name="send" value="Отправить"></p>
</form>

В этом примере мы:

Разместили внутри формы два элемента <fieldset>, благодаря которым поля разделены на группы, а вокруг каждой группы появилась рамка. Тегом <legend> мы определили для каждой рамки заголовок.
В первую группу поместили два однострочных текстовых поля с уникальными именами (атрибут name), во вторую — два переключателя с общим именем.
Кнопку отправки разместили после групп: она относится ко всей форме.

Что и куда отправляет форма

В рамках изучения HTML мы не будем рассматривать то, как серверы обрабатывают входные данные, лишь рассмотрим базовые принципы передачи формы.

Когда пользователь нажимает кнопку отправки, браузер собирает данные формы в пары имя=значение: имя берётся из атрибута name поля, значение — из введённого текста или атрибута value. Для анкеты выше получится примерно такой набор:

Код

owner=Анна&city=Москва&time=morning&ball=yes&send=Отправить

поле без атрибута name не отправляется, даже если в нём есть текст;
от группы переключателей отправляется только выбранный вариант;
флажок отправляется, только если он отмечен. Если у флажка нет атрибута value, отправляется значение on;
у нескольких флажков можно указать одно общее имя — тогда каждый отмеченный добавит свою пару, например take=ball&take=rope;
имя и значение кнопки отправляются, только если форму отправили именно этой кнопкой.

Обработчик формы — это, как правило, программа на сервере, которая принимает и обрабатывает полученные данные. Чтобы указать обработчик формы, используется атрибут action тега <form>:

HTML

<form action="/submit">

В атрибуте action указывается URL-адрес того места, куда отправляется форма. Если атрибут не задан, форма отправляется по адресу текущей страницы. В примере данные отправляются обработчику по адресу /submit на том же сайте. Этот адрес условный: для обработки данных на сервере нужно настроить соответствующий обработчик. Он может быть написан на любом серверном языке.

Ещё одним важным атрибутом элемента <form> является атрибут method. Он определяет метод HTTP (get или post), который используется при передаче формы:

HTML

<form action="/submit" method="get">
<form action="/submit" method="post">

Метод get используется по умолчанию. Применяйте его, если форма только запрашивает данные (как поисковый запрос) и не содержит конфиденциальной информации. При использовании метода get данные формы добавляются к адресу после знака ?, поэтому они видны в адресной строке, сохраняются в истории браузера и в закладках:

Код

https://www.example.com/submit?owner=Анна&city=Москва

Используйте метод post, если форма изменяет данные на сервере (оформляет заказ, отправляет сообщение) или содержит личную информацию, например пароль. При методе post данные отправляются в теле запроса и не попадают в адрес страницы.

Учебная форма на сайте без обработчика только показывает интерфейс заявки: браузер соберёт и отправит данные, но принять, сохранить или переслать их некому. Обработку форм изучают в курсах серверного программирования.

Текстовое поле с name=owner и введённым значением Анна добавляет пару owner=Анна. Браузер отправляет её по адресу /submit из action. Атрибут id идентифицирует поле в документе и не заменяет name. — Схема передачи данных: имя берётся из `name`, адрес обработчика — из `action`.

Проверьте себя

Задание

Тони хочет гулять не один, а с новыми друзьями, — пусть их хозяева оставляют заявки на сайте. В редакторе открыта страница pages/signup.html «Запись на прогулку» с полями имени и почты из предыдущей части. Дополните форму:

группу с заголовком «О вас»: поле имени (имя owner, тип text) и поле электронной почты (имя email, тип email, подсказка anna@example.com). Подпишите оба поля элементом <label> с атрибутом for и укажите подходящие значения autocomplete;
группу «Когда гулять»: два переключателя с общим именем time и значениями morning и evening, подписи «Утром» и «Вечером». Утро должно быть выбрано заранее;
группу «Что взять с собой»: флажки «Мячик» и «Канат» с общим именем take и значениями ball и rope;
кнопку отправки с надписью «Записаться».

Проверьте добавленный в предыдущей части пункт меню: в меню главной страницы и страницы игрушек пункт «Запись на прогулку» должен вести на pages/signup.html из index.html и signup.html из pages/toys.html. Пути к страницам мы разбирали в уроке «Ссылки».

Ожидаемый результат: на странице три группы в рамках с заголовками. Клик по подписям «Ваше имя» и «Электронная почта» ставит курсор в поле, а клик по словам «Утром», «Вечером», «Мячик» и «Канат» выбирает переключатель или флажок. Выбрать сразу утро и вечер нельзя. Пункт меню «Запись на прогулку» на главной странице и странице игрушек открывает форму.

Выполните задание

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Сайт Тони</title>
  </head>
  <body style="background-color: linen">
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
          <li><a href="pages/signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1 id="top" style="color: saddlebrown; text-align: center">Привет! Меня зовут Тони</h1>
      <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
      <p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
      <p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
      <ul>
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
        <li><a href="#schedule">Мой режим дня</a></li>
        <li><a href="#walks">Где я гуляю</a></li>
        <li><a href="#song">Песня для прогулок</a></li>
      </ul>
      <section>
        <h2 id="toy" class="section-title" style="color: #8B4513">Моя любимая игрушка</h2>
        <p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
        <figure>
          <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат &quot;Удав&quot;">
          <figcaption style="color: dimgray">Я и мой канат «Удав»</figcaption>
        </figure>
        <p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
        <p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
        <hr>
        <p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
      </section>
      <section>
        <h2 style="color: #8B4513">Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
      </section>
      <section>
        <h2 id="commands" class="section-title" style="color: #8B4513">Команды, которые я знаю</h2>
        <p>Хозяин научил меня командам на немецком:</p>
        <dl>
          <dt lang="de">Sitz!</dt>
          <dd>сидеть</dd>
          <dt lang="de">Platz!</dt>
          <dd>лежать</dd>
          <dt lang="de">Fuß!</dt>
          <dd>рядом</dd>
        </dl>
        <details>
          <summary>Почему команды на немецком?</summary>
          <p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
        </details>
      </section>
      <section>
        <h2 id="schedule" style="color: #8B4513">Мой режим дня</h2>
        <table>
          <caption>Режим дня Тони</caption>
          <thead>
            <tr>
              <th scope="col">Время</th>
              <th scope="col">Будни</th>
              <th scope="col">Выходные</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">07:00</th>
              <td>Прогулка, 20 минут</td>
              <td>Сплю</td>
            </tr>
            <tr>
              <th scope="row">08:00</th>
              <td colspan="2">Завтрак</td>
            </tr>
            <tr>
              <th scope="row">13:00</th>
              <td>Жду хозяина и сплю</td>
              <td>Прогулка в парке, 1 час</td>
            </tr>
            <tr>
              <th scope="row">19:00</th>
              <td colspan="2">Ужин</td>
            </tr>
            <tr>
              <th scope="row">21:00</th>
              <td colspan="2">Вечерняя прогулка</td>
            </tr>
          </tbody>
        </table>
      </section>
      <section>
        <h2 id="progress" style="color: #8B4513">Мои успехи</h2>
        <p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
        <p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
      </section>
      <section>
        <h2 id="walks" style="color: #8B4513">Где я гуляю</h2>
        <p>Я люблю гулять в сквере у дома.</p>
        <p>
          <a href="pages/walks.html" target="walk">Маршрут</a> |
          <a href="assets/tony.png" target="walk">Фото с прогулки</a>
        </p>
        <iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
        <h3>Видео с прогулки</h3>
        <p>Субтитры помогут, если вы смотрите видео без звука.</p>
        <video width="180" height="320" poster="assets/walk.jpg" controls>
          <source src="assets/walk.mp4" type="video/mp4">
          <track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
          <p><a href="assets/walk.mp4">Скачать видео</a></p>
        </video>
        <h3>Как я лаю</h3>
        <p>Так я разговариваю с хозяином — у нас целый диалог!</p>
        <audio controls>
          <source src="assets/bark.mp3" type="audio/mpeg">
          <p><a href="assets/bark.mp3">Скачать запись</a></p>
        </audio>
      </section>
      <section>
        <h2 id="song" style="color: #8B4513">Песня для прогулок</h2>
        <p>Хозяин включает эту песню, когда мы выходим гулять.</p>
        <iframe width="480" height="270" src="https://www.youtube.com/embed/ojULkWEUsPs?start=17" title="Baha Men — Who Let the Dogs Out" loading="lazy" allow="fullscreen"></iframe>
        <p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
      </section>
      <section>
        <h2 style="color: #8B4513">Моя любимая книга</h2>
        <p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
        <figure>
          <blockquote>
            <p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
          </blockquote>
          <figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
        </figure>
      </section>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer style="background-color: hsl(30, 50%, 90%)">
      <p style="text-align: center"><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/signup.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Запись на прогулку с Тони</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
          <li><a href="signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Запись на прогулку</h1>
      <p>Гуляйте вместе с Тони! Оставьте заявку, и хозяин Тони напишет вам, чтобы договориться о встрече.</p>
      <form>

          <p>
            <label for="owner">Ваше имя</label>
            <input type="text" id="owner" name="owner" autocomplete="name">
          </p>
          <p>
            <label for="email">Электронная почта</label>
            <input type="email" id="email" name="email" autocomplete="email" placeholder="anna@example.com">
          </p>
        <p><input type="submit" value="Записаться"></p>
      </form>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/toys.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Игрушки Тони</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
          <li><a href="signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul>
        <li>Канат с мячиком «Удав» — моя любимая игрушка</li>
        <li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
        <li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
      </ul>
      <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
      <h2>Как играть со мной в канат</h2>
      <ol>
        <li>Покажите мне канат.</li>
        <li>Бросьте его подальше.</li>
        <li>Подождите, пока я принесу его обратно.</li>
        <li>Похвалите меня — и всё сначала!</li>
      </ol>
      <section>
        <h2 id="album">Мой фотоальбом</h2>
        <ul>
          <li>
            <figure>
              <img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
              <figcaption>Я в детстве</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
              <figcaption>С плюшевой белкой</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
              <figcaption>В худи для холодной погоды</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
              <figcaption>Шлейка надета — идём гулять!</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
              <figcaption>Смеюсь над шуткой хозяина</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
              <figcaption>После прогулки</figcaption>
            </figure>
          </li>
        </ul>
      </section>
      <p><a href="../index.html#commands">Какие команды я знаю</a></p>
      <p><a href="../index.html">Вернуться на главную</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/walks.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Где гуляет Тони</title>
  </head>
  <body>
    <h1>Мой маршрут</h1>
    <ol>
      <li>Сквер у дома.</li>
      <li>Пруд с утками.</li>
      <li>Поляна для игры с канатом.</li>
    </ol>
  </body>
</html>

Продолжите в VS Code

Нажмите «Скачать ZIP» в редакторе выше и распакуйте архив в папку my-site: он содержит все страницы и ресурсы примера с вашими текущими правками. Сохраните структуру папок; перед заменой существующих файлов сохраните копию своей версии сайта.
Откройте pages/signup.html в браузере, заполните форму, отметьте оба флажка и нажмите «Записаться».

Ожидаемый результат: у формы нет атрибута action, поэтому браузер отправит её по адресу этой же страницы методом get. Страница откроется заново, а в адресной строке после знака ? появятся отправленные пары, например ?owner=Анна&email=anna%40example.com&time=morning&take=ball&take=rope. Символ @ и русские буквы браузер записывает специальными кодами — это нормально. Удалите у поля имени атрибут name и отправьте форму снова: пара owner исчезнет из адреса. Если результат отличается и найти ошибку не получается, нажмите в редакторе выше «Показать решение» и сравните его со своим кодом.

Дополнительное задание: форма оформления заказа

Используя полученные знания, составьте форму оформления заказа. Вся форма находится в группе «Оформление заказа»; в редакторе уже размечены заголовки разделов. Добавьте:

текстовые поля «Контактное лицо» и «Ваш адрес», поле телефона и поле электронной почты с подсказками «Введите имя и фамилию», «Введите ваш адрес», «Введите ваш телефон», «ваш e-mail»;
поля «Дата доставки» и «Время доставки»;
переключатели оплаты «Наличными» и «По карте», вариант «По карте» выбран заранее;
флажки «Домофон», «Неисправен звонок», «Собака во дворе», «Вход с заднего фасада», «Вход с торца здания»;
кнопку отправки с надписью «подтвердить».

В полях, где предполагается выбор, должна быть возможность выбрать вариант кликом по тексту, а не только по самому элементу. Подпишите и все остальные поля.

Ожидаемый результат: клик по любой подписи переводит фокус в поле или выбирает вариант; выбрать оба способа оплаты одновременно нельзя.

Дополнительное задание: форма оформления заказа

Дополните заготовку полями по образцу. Проверьте нажатие на подписи, выбор способа оплаты и независимость флажков. Отправка данных в образце отключена.

Подсказка

Свяжите label и input через for и id либо вложите поле в label. У способов оплаты должно быть одинаковое name и разные value. Для независимых вариантов используйте checkbox.

index.html

HTML

<form>
  <fieldset>
    <legend>Оформление заказа</legend>
    <p><b>Введите контактные данные и адрес доставки:</b></p>
    <!-- ???: Контактное лицо, адрес, телефон и e-mail -->

    <p><b>Выберите дату и время доставки:</b></p>
    <!-- ???: Дата и время доставки -->

    <p><b>Оплата:</b></p>
    <!-- ???: Наличными или по карте -->

    <p><b>Прочие параметры:</b></p>
    <!-- ???: Пять флажков -->

    <!-- ???: Кнопка «подтвердить» -->
  </fieldset>
</form>