0Pricing
HTML Academy · Урок

Элемент form: action, method и enctype

Настройте элемент form с атрибутами action, method и enctype

«Элемент form: action, method и enctype» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое форма?

Формы HTML — основной способ отправки данных пользователя на сервер:

  • Вход и регистрация
  • Поисковые запросы
  • Оформление заказа и оплата
  • Связь с пользователями и обратная связь

Каждая форма начинается с элемента <form>.

Элемент form

Элемент <form> содержит все элементы управления формой:

<form action="/submit" method="post">
  <!-- form controls go here -->
  <button type="submit">Send</button>
</form>
<!-- When the user submits, the browser sends the form data
     to the URL specified in action using the method specified -->

Атрибут action

Атрибут action указывает, куда отправляются данные формы:

<form action="/api/login">...</form>      <!-- relative path -->
<form action="https://api.example.com/form">...</form>  <!-- absolute -->
<form action="">...</form>                 <!-- current URL (empty) -->
<form>...</form>                           <!-- no action = current URL -->

Атрибут method

Атрибут method определяет способ отправки данных:

<form method="get">...</form>
<!-- GET: appends data to URL as query string
     example.com/search?q=html&sort=date
     Used for: search forms, filters, bookmarkable results -->

<form method="post">...</form>
<!-- POST: sends data in the request body
     Data is not visible in the URL
     Used for: login, registration, file uploads, sensitive data -->

GET и POST

GET и POST имеют разные характеристики:

  • GET — данные в URL (ограниченная длина), можно добавить в закладки, кэшируются, идемпотентны
  • POST — данные в теле запроса (неограниченный объём), нельзя добавить в закладки, не кэшируются, неидемпотентны

Практическое правило: если отправка не изменяет состояние сервера → GET; если изменяет → POST.

Атрибут enctype

Атрибут enctype определяет способ кодирования данных формы для запросов POST:

<!-- Default: URL-encoded (text/form fields) -->
<form method="post" enctype="application/x-www-form-urlencoded">

<!-- For file uploads: multipart -->
<form method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

<!-- Plain text (rare): -->
<form method="post" enctype="text/plain">

Атрибут novalidate

Атрибут novalidate отключает встроенную проверку браузера:

<form action="/submit" method="post" novalidate>
  <!-- Validation handled by JavaScript instead -->
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

Атрибут target у формы

Атрибут target определяет, где отображается ответ:

<form action="/search" target="_blank">
  <!-- Response opens in a new tab -->
</form>
<!-- Values: _blank, _self, _parent, _top, or a frame name -->
<!-- Rarely used — most forms stay on the same page or use AJAX -->

Атрибут autocomplete у формы

Атрибут autocomplete управляет автозаполнением в браузере:

<!-- Off: disable autofill for the entire form -->
<form autocomplete="off">

<!-- On (default): allow autofill -->
<form autocomplete="on">

<!-- Better: control at the field level:
<input type="email" autocomplete="email">
<input type="current-password" autocomplete="current-password">
-->

Отправка формы с помощью JavaScript

Отмените стандартную отправку и обработайте её с помощью JavaScript:

<form id="contact-form" action="/contact" method="post">
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();  // stop normal browser submission
  const data = new FormData(e.target);
  const res = await fetch('/contact', { method: 'POST', body: data });
  // handle response...
});
</script>

Совместное использование action и method

Полный пример формы с правильными значениями action и method:

<form action="/api/newsletter" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>
<!-- POST because: creating a subscription = server state change -->

Быстрая проверка

Какой метод формы следует использовать при загрузке файла?

Итог: элемент form

Основные сведения об элементе формы:

  • action — URL, на который отправляются данные формы
  • method="get" — данные в URL (поиск, фильтры)
  • method="post" — данные в теле запроса (конфиденциальные данные, изменения состояния)
  • enctype="multipart/form-data" — необходим для загрузки файлов
  • novalidate — отключает проверку браузера

Часто задаваемые вопросы

Урок «Элемент form: action, method и enctype» бесплатный?

Да — полный текст урока «Элемент form: action, method и enctype» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Элемент form: action, method и enctype»?

Настройте элемент form с атрибутами action, method и enctype Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Элемент form: action, method и enctype»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Элемент form: action, method и enctype
  2. Типы input: text, password, email, number и tel
  3. Элемент label и доступность
  4. Элемент button: submit, reset и button
← Назад к HTML Academy