Атрибуты формы (action, method, enctype)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 21
Автор
Рек. время прохождения 3 минуты
Упражнений 6
Комментарии 0
Тренажер HTML
Эта серия упражнений посвящена 'сердцу' любой HTML-формы — атрибутам `action`, `method` и `enctype`. Вы узнаете, как управлять отправкой данных: куда они направляются, каким способом передаются и в каком формате кодируются. Мы будем работать с примерами, не требующими ввода личных данных, такими как формы поиска, фильтры товаров, инструменты для загрузки и обработки файлов. Каждое задание поможет вам закрепить на практике, как правильно настраивать формы для различных технических задач, от простого получения данных до сложной загрузки файлов на сервер.
Список тем

Указание адреса обработчика

id: 37843_html_form_attributes_np_01

Представьте, что вы создаете форму для поиска статей в базе знаний. Чтобы форма работала, ей нужно указать адрес скрипта-обработчика. Добавьте атрибут, который направит данные на URL '/find-article'.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f5f7;
  padding: 15px;
}
.widget-form {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
h3 {
  margin-top: 0;
  color: #172b4d;
  text-align: center;
}
.form-group {
  margin-bottom: 15px;
}
input[type="search"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #0052cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
HTML
<div class="widget-form">
  <h3>Поиск по базе знаний</h3>
  <form input1="/find-article">
    <div class="form-group">
      <input type="search" name="query" placeholder="Введите ключевые слова...">
    </div>
    <button type="submit">Искать</button>
  </form>
</div>
Для определения URL-адреса, на который будут отправлены данные формы, используется атрибут `action`. Его значением должен быть путь к серверному скрипту. Например: `action="/handler"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Передача данных через URL

id: 37843_html_form_attributes_np_02

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

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f5f7;
  padding: 15px;
}
.widget-form {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
h3 {
  margin-top: 0;
  color: #172b4d;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
  background-color: white;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #0065ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
HTML
<div class="widget-form">
  <h3>Фильтр товаров</h3>
  <form action="/products" method="input1">
    <div class="form-group">
      <label for="color">Цвет:</label>
      <select id="color" name="color">
        <option value="blue">Синий</option>
        <option value="red">Красный</option>
        <option value="green">Зеленый</option>
      </select>
    </div>
    <button type="submit">Применить</button>
  </form>
</div>
Чтобы параметры формы добавлялись в URL в виде `?key=value`, используется метод `GET`. Он указывается в атрибуте `method`. Это идеальный выбор для фильтров и поисковых запросов.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Отправка данных в теле запроса

id: 37843_html_form_attributes_np_03

Вы делаете форму для голосования в опросе. Чтобы избежать случайной повторной отправки голоса при обновлении страницы результатов, данные лучше передавать не через URL. Укажите атрибут и значение для такого способа отправки.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f5f7;
  padding: 15px;
}
.widget-form {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
h3 {
  margin-top: 0;
  color: #172b4d;
}
.poll-option {
  margin-bottom: 10px;
}
label {
  margin-left: 8px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #36b37e;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 15px;
}
HTML
<div class="widget-form">
  <h3>Какой ваш любимый фреймворк?</h3>
  <form action="/vote" input1="POST">
    <div class="poll-option">
      <input type="radio" id="react" name="framework" value="react">
      <label for="react">React</label>
    </div>
    <div class="poll-option">
      <input type="radio" id="vue" name="framework" value="vue">
      <label for="vue">Vue</label>
    </div>
    <div class="poll-option">
      <input type="radio" id="angular" name="framework" value="angular">
      <label for="angular">Angular</label>
    </div>
    <button type="submit">Голосовать</button>
  </form>
</div>
Для отправки данных в теле HTTP-запроса, а не в URL, используется метод `POST`. Укажите атрибут `method` со значением `POST`. Этот метод является предпочтительным для действий, которые изменяют состояние на сервере (например, сохранение данных, голосование).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Подготовка формы к загрузке файлов

id: 37843_html_form_attributes_np_04

Вы создаете онлайн-инструмент для конвертации изображений. Форма должна принимать файл от пользователя. Чтобы браузер смог корректно отправить файл, необходимо добавить специальный атрибут, указывающий на тип кодирования данных.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f5f7;
  padding: 15px;
}
.widget-form {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
h3 {
  margin-top: 0;
  color: #172b4d;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="file"] {
  width: 100%;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #0052cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
HTML
<div class="widget-form">
  <h3>Конвертер изображений</h3>
  <form action="/convert" method="POST" input1="multipart/form-data">
    <div class="form-group">
      <label for="image-file">Выберите файл:</label>
      <input type="file" id="image-file" name="source_file">
    </div>
    <button type="submit">Конвертировать</button>
  </form>
</div>
Когда форма содержит `<input type="file">`, для правильной отправки файла требуется атрибут `enctype`. Он определяет, как данные формы будут закодированы перед отправкой на сервер.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выбор правильного типа кодирования

id: 37843_html_form_attributes_np_05

Форма для загрузки видео на хостинг готова, но ей не хватает правильного значения для атрибута `enctype`. Укажите значение, которое позволит передавать большие двоичные данные, такие как видеофайлы.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f5f7;
  padding: 15px;
}
.widget-form {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
h3 {
  margin-top: 0;
  color: #172b4d;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="file"] {
  color: #42526e;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #0052cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
HTML
<div class="widget-form">
  <h3>Загрузка видео</h3>
  <form action="/upload-video" method="POST" enctype="input1">
    <div class="form-group">
      <label for="video-file">Видеофайл:</label>
      <input type="file" id="video-file" name="video" accept="video/*">
    </div>
    <button type="submit">Загрузить</button>
  </form>
</div>
Для отправки файлов через форму значение атрибута `enctype` должно быть `multipart/form-data`. Этот тип указывает браузеру, что тело запроса будет разделено на несколько частей, одна из которых — сам файл.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексная настройка формы загрузки

id: 37843_html_form_attributes_np_06

Финальное задание: соберите все вместе. Настройте форму для инструмента, который накладывает водяной знак на изображение. Вам нужно указать все три ключевых атрибута: адрес обработчика (`/watermark`), метод отправки и тип кодирования данных.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f5f7;
  padding: 15px;
}
.widget-form {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
h3 {
  margin-top: 0;
  color: #172b4d;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"], input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #0052cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
HTML
<div class="widget-form">
  <h3>Наложить водяной знак</h3>
  <form input1="/watermark" input2="POST" input3="multipart/form-data">
    <div class="form-group">
      <label for="img">Изображение:</label>
      <input type="file" id="img" name="image_file" accept="image/*">
    </div>
    <div class="form-group">
      <label for="text">Текст знака:</label>
      <input type="text" id="text" name="watermark_text" value="MySite.com">
    </div>
    <button type="submit">Обработать</button>
  </form>
</div>
Здесь нужна комбинация всех изученных атрибутов. `action` должен указывать на '/watermark'. `method` для отправки файла должен быть `POST`. А `enctype` для корректной передачи файла должен быть `multipart/form-data`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру