Атрибут action тега <form> — куди відправити форму

HTML

<form action="/uk/search" method="get">
    <p class="head">Форма №1</p>
    <label>Запит <input type="search" name="q" value="таблиця"></label>
    <p>
        <button type="submit">Звичайний Submit</button>
    </p>
    <p>
        <button type="submit" formaction="/uk/subscribe">Submit із formaction</button>
    </p>
</form>

<form method="post">
    <p class="head">Форма №2 — атрибута action немає зовсім</p>
    <p>
        <button type="submit">Звичайний Submit</button>
    </p>
</form>

CSS

body {
    font-family: system-ui, sans-serif;
    font-size: 15px;
}

form {
    border: 1px solid #cfd4d9;
    padding: 10px 14px;
    margin-bottom: 16px;
}

form::before {
    display: block;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #cfd4d9;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    color: #2f6f9f;
}

form[action]::before {
    content: 'action = "' attr(action) '"   method = "' attr(method) '"';
}

form:not([action])::before {
    content: 'action відсутній → відправка на адресу цієї ж сторінки';
    color: #7b5ea7;
}

.head {
    margin: 0 0 8px;
    font-weight: bold;
}

form p {
    margin: 8px 0;
}

button::after {
    font-family: ui-monospace, monospace;
    font-size: 12px;
}

button:not([formaction])::after {
    content: ' → адреса форми';
}

button[formaction]::after {
    content: ' → ' attr(formaction);
    color: #c0392b;
}

HTML

<p>Форма шле дані на адресу з атрибута <code>action</code>. Кнопка нижче показує запит, який пішов би на сервер.</p>

<form id="feedback" action="/feedback/save" method="get">
  <label for="login">Ім'я:</label><br>
  <input type="text" id="login" name="login" value="Тарас"><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" value="[email protected]"><br>

  <label for="message">Ваше повідомлення:</label><br>
  <textarea id="message" name="message">Вітаю!</textarea><br><br>

  <input type="submit" value="Надіслати">
</form>

<p id="text">Натисніть «Надіслати».</p>

CSS

label {
  font-weight: bold;
}

input,
textarea {
  width: 20em;
  padding: 4px;
}

#text {
  margin-top: 16px;
  padding: 8px;
  background: #f1f5f5;
  border-left: 3px solid #99aaaa;
  font-family: monospace;
  white-space: pre-line;
}

JS

// Рамка прикладу має sandbox без allow-forms, тож справжня відправка тут
// неможлива, а подія submit навіть не настає. Скасовуємо відправку на кліку
// і показуємо запит, який зібрав би переглядач.
const form = document.getElementById('feedback');
const out = document.getElementById('text');

form.addEventListener('click', (event) => {
  if (!event.target.matches('input[type="submit"]')) {
    return;
  }

  event.preventDefault();

  const query = new URLSearchParams(new FormData(form)).toString();

  out.textContent = form.method.toUpperCase() + ' ' + form.getAttribute('action') + '?' + query;
});