Атрибут formaction тега <button> — адреса обробника

HTML

<form action="/notes/save" method="post">
  <p>
    <label>Текст нотатки<br>
      <textarea name="text" rows="2" cols="30">Чернетка</textarea>
    </label>
  </p>
  <p class="row">
    <button name="do" value="save">Зберегти</button>
    <button name="do" value="publish" formaction="/notes/publish">Опублікувати</button>
    <button type="button">Згорнути</button>
  </p>
</form>

CSS

.row { display: flex; flex-wrap: wrap; gap: 1.5em; align-items: flex-start; }
button { display: block; padding: .4em .9em; }

/* підпис під кожною кнопкою — з її ж атрибутів */
button::after {
  display: block;
  margin-top: .35em;
  font: .8rem/1.3 monospace;
  white-space: pre-line;
}
button[formaction]::after { content: "→ " attr(formaction); color: #1c6b2e; }
button:not([formaction]):not([type=button])::after { content: "→ /notes/save\A (action форми)"; color: #245ea8; }
button[type=button]::after { content: "→ нікуди\A (type=button не відправляє)"; color: #8a3b12; }

HTML

<p>Обидві кнопки належать одній формі. У першої свій <code>formaction</code> — він перебиває адресу з <code>action</code> форми.</p>

<form id="article" action="/article/publish" method="post">
  <label for="title">Заголовок:</label><br>
  <input type="text" id="title" name="title" value="Як працює formaction"><br>

  <label for="body">Текст:</label><br>
  <textarea id="body" name="body">Чернетка статті.</textarea><br><br>

  <button formaction="/article/draft">Зберегти чернетку</button>
  <button>Опублікувати</button>
</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('article');
const out = document.getElementById('text');

form.addEventListener('click', (event) => {
  const button = event.target.closest('button');
  if (!button) {
    return;
  }

  event.preventDefault();

  const action = button.getAttribute('formaction') || form.getAttribute('action');
  const data = new URLSearchParams(new FormData(form)).toString();

  out.textContent = form.method.toUpperCase() + ' ' + action + '\n' + data;
});