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

Атрибут action в HTML формах

Ответ на этот вопрос — атрибут action элемента <form>. Это фундаментальный HTML атрибут, который определяет URL-адрес, на который браузер отправит данные формы при отправке.

Основное использование

Атрибут action указывает на endpoint, который обработает данные формы. Это может быть относительный или абсолютный URL.

<!-- Отправка на локальный endpoint -->
<form action="/api/users" method="POST">
  <input type="text" name="username" required />
  <input type="email" name="email" required />
  <button type="submit">Отправить</button>
</form>

<!-- Отправка на внешний сервис -->
<form action="https://external-api.com/submit" method="POST">
  <input type="text" name="data" />
  <button type="submit">Отправить</button>
</form>

В контексте современного фронтенда

В современных Single Page Applications с React, Vue или Angular мы редко полагаемся на нативное поведение HTML форм. Вместо этого обрабатываем отправку формы через JavaScript, используя Fetch API или Axios.

import { useState } from react;

export function LoginForm() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();

  async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);
    setError();

    const formData = new FormData(e.currentTarget);
    
    try {
      const response = await fetch(/api/v1/auth/login, {
        method: POST,
        body: formData,
      });

      if (!response.ok) {
        throw new Error(Login failed);
      }

      const result = await response.json();
      localStorage.setItem(token, result.token);
      window.location.href = /dashboard;
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="Email" required />
      <input type="password" name="password" placeholder="Пароль" required />
      {error && <p className="text-red-600">{error}</p>}
      <button type="submit" disabled={loading}>
        {loading ? Отправка... : Вход}
      </button>
    </form>
  );
}

Дополнительные атрибуты

Кроме action существуют важные атрибуты: method (тип HTTP запроса), enctype (тип кодирования), target (где открыть результат).

Атрибут action — это простой, но мощный инструмент для определения маршрута обработки данных формы, и понимание его работы важно для любого frontend разработчика.