HTML FORM DATA LAB

Submit Button Payload

通常の入力値と一緒に、押したボタンの値だけが送信されます。

NATIVE HTML
01

NORMAL FORM

入力値と操作をまとめて送る

SUBMITTER DATA ボタンのname / value
workspace.example/project
02

LIVE PAYLOAD

送信データを確認する

5 entries
POST/projectREADY
KEY POINT

入力項目に加えて、押された送信ボタンの`name/value`だけが入ります。

PRESSED—
BUTTON NAMEintent
BUTTON VALUE—
PAYLOADREADY
03

HOW IT WORKS

同じname、異なるvalue

name="intent"
01
入力値を用意project・owner・plan・notify
02
送信ボタンを押すsave・preview・publish
03
ひとつのPayload押したボタンだけを追加

BONUS USE CASE

同じ仕組みで、3問クイズ

SCORE0/ 3
QUESTION 1 / 3
HTML FORM

複数の送信ボタンがあるとき、送信データへ入るのは？

SELECT AN ANSWER

回答ボタンも`name="answer"`と異なる`value`を持っています。

HTML RECIPE

送信ボタンにもnameとvalue

<form action="/project" method="post">
  <input name="project">
  <select name="plan">...</select>

  <button name="intent" value="save">
    保存する
  </button>

  <button name="intent" value="preview">
    プレビュー
  </button>

  <button name="intent" value="publish">
    公開する
  </button>
</form>