Атрибут action в HTML

Атрибут HTML action задаёт URL, на который отправляются данные формы при её отправке. Его значение — адрес назначения, обрабатывающий отправленные данные, — как правило, серверный скрипт или конечная точка.

Этот атрибут можно использовать только на элементе <form>. Когда пользователь активирует элемент управления отправкой, браузер собирает именованные поля формы, кодирует их и отправляет запрос по адресу, указанному в action. На этой странице описано поведение action, что происходит при его отсутствии, как он взаимодействует с другими атрибутами формы и как отдельная кнопка может переопределить его с помощью formaction.

Синтаксис

<form action="URL"></form>

URL может быть двух видов:

Абсолютный — полный URL, включающий схему и хост, например https://api.example.com/submit. Используйте его, когда форма должна отправлять данные на другой источник (другой домен, поддомен или схему).
Относительный — путь, разрешаемый относительно URL текущего документа, например /form/submit или save.php. Это стандартный выбор, когда форма отправляет данные обратно на ваш собственный сайт.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit">
      <label for="fname">Name</label>
      <input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
      <label for="lname">Surname</label>
      <input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
      <input type="submit" value="Submit"/>
    </form>
  </body>
</html>

Попробуйте сами »

Здесь используется относительный путь, поэтому данные отправляются на /form/submit того же домена, на котором находится текущая страница. Чтобы отправить данные на другой домен, используйте абсолютный URL, например https://example.com/some-page.

Что происходит, когда `action` не указан

Если атрибут action опущен (или задан пустой строкой), форма отправляется на URL текущей страницы. Это допустимый и распространённый шаблон: страница может одновременно отображать форму и обрабатывать её отправку.

<!-- Both of these submit back to the URL the form was loaded from -->
<form method="post">...</form>
<form action="" method="post">...</form>

Имейте в виду, что отправка данных на текущий URL с методом GET по умолчанию добавляет поля формы к URL в виде строки запроса, что перезагружает страницу с этими значениями, видимыми в адресной строке.

Взаимодействие `action` с другими атрибутами формы

Атрибут action никогда не работает в одиночку — он определяет куда отправляются данные, тогда как другие атрибуты <form> определяют как они туда попадают:

method — выбирает метод HTTP. При GET (по умолчанию) закодированные поля добавляются к URL из action в виде строки запроса, и URL принимает вид action?name=value&.... При POST поля передаются в теле запроса, оставляя URL чистым.
enctype — задаёт способ кодирования тела запроса и имеет значение только при POST. Значение по умолчанию application/x-www-form-urlencoded подходит для текста; multipart/form-data нужен, когда форма включает загрузку файла (<input type="file">).
target — определяет, где будет отображён ответ, например _self (та же вкладка, по умолчанию), _blank (новая вкладка) или имя <iframe>.

Подробнее об этом можно узнать в справочнике по тегу <form> и в общем руководстве по HTML-формам.

Абсолютные и относительные URL: компромиссы

Выбор между абсолютным и относительным значением action — это не просто вопрос стиля:

Относительные URL привязывают форму к сайту, с которого она загружена. Они выдержат перенос сайта на новый домен или переход с http на https, а отправка данных остаётся в рамках одного источника, что исключает сложности с cross-origin-запросами.
Абсолютные URL необходимы, когда нужно отправить данные на другой источник (например, сторонний обработчик форм или отдельный хост API). Будьте внимательны: POST на другой источник является cross-origin-запросом. Принимающий сервер должен его принять, и запрос может подчиняться правилам CORS для скриптовых частей вашей страницы.

Замечание по безопасности: формы могут отправлять данные на любой источник, указанный в action, и браузер отправит вместе с запросом куки этого источника. Именно этот механизм лежит в основе межсайтовой подделки запросов (CSRF) — вредоносная страница может содержать форму, отправляющую данные на ваш сайт. Поэтому указывайте в action только доверенные источники и защищайте любые конечные точки, изменяющие состояние, с помощью анти-CSRF-токена, проверяемого на сервере. Предпочитайте относительные (одноисточниковые) значения action, если у вас нет весомой причины отправлять данные в другое место.

Переопределение `action` с помощью `formaction`

Одна форма может иметь более одной кнопки отправки, и каждая может отправлять данные в разные места с помощью атрибута formaction. Если он присутствует на кнопке или элементе ввода, инициировавшем отправку, formaction переопределяет атрибут action самой формы. (Связанные атрибуты formmethod, formenctype и formtarget аналогичным образом переопределяют method, enctype и target.)

<!DOCTYPE html>
<html>
  <head>
    <title>formaction example</title>
  </head>
  <body>
    <form action="/articles/publish" method="post">
      <label for="title">Title</label>
      <input type="text" name="title" id="title" value="My draft"/><br /><br />

      <!-- Uses the form's action: /articles/publish -->
      <button type="submit">Publish</button>

      <!-- Overrides the action just for this button -->
      <button type="submit" formaction="/articles/save-draft">Save draft</button>
    </form>
  </body>
</html>

Обе кнопки отправляют одинаковые поля, но «Publish» отправляет данные на /articles/publish, а «Save draft» — на /articles/save-draft. formaction поддерживается на <button type="submit"> и <input type="submit"> (а также <input type="image">), и не оказывает никакого эффекта на элементы управления, не связанные с отправкой.

Практика

Какова функция атрибута 'action' в HTML?

Он указывает URL, на который отправляются данные формы при её отправке.Он изменяет цвет текста внутри формы.Он добавляет дополнительные стили к HTML-элементам.Он определяет тип элемента формы (например, input, select).При отсутствии он полностью блокирует отправку формы.