HTML FORM ROUTING LAB

Multi-action Form

同じフォームでも、押すボタンで行き先を変えられます。

NATIVE HTML

ONE FORM

入力と送信ボタン

FORM STATE入力状態を切り替える

EMPTY

未入力では、入力チェックを外した「下書き保存」だけが進みます。

article.example/edit

FORM DEFAULT action="/publish" method="post"

ボタン側に指定がなければ、form本体の設定を使います。

LIVE ROUTING

押したボタンの条件で送信

SAME FORM

DRAFT

/drafts

METHOD: POST
VALIDATION: SKIP
TARGET: SELF

PREVIEW

/preview

METHOD: GET
VALIDATION: ON
TARGET: _BLANK

PUBLISH

/publish

METHOD: POST
VALIDATION: ON
TARGET: SELF

PRESSED—

ACTION—

METHOD—

RESULTREADY

BUTTON OVERRIDES

ボタン側で上書きできる

formaction

送信先formのactionを上書き

/drafts

formmethod

送信方法GET / POSTを切り替え

get

formtarget

表示先別タブにも表示できる

_blank

formnovalidate

入力チェック下書きだけ検証を省略

true

KEY POINT

フォームを複製せず、送信ボタンが目的を持つ。

event.submitterで押されたボタンも取得できます。

HTML RECIPE

3つのボタン、ひとつのform

<form action="/publish" method="post">
  <input name="title" required>

  <button type="submit"
    formaction="/drafts"
    formnovalidate>
    下書き保存
  </button>

  <button type="submit"
    formaction="/preview"
    formmethod="get"
    formtarget="_blank">
    プレビュー
  </button>

  <button type="submit">
    公開する
  </button>
</form>

SUBMIT EVENT

押されたボタンを
あとから識別

form.addEventListener(
  "submit",
  (event) => {
    console.log(
      event.submitter.value
    );
  }
);

送信処理を共通化したまま、下書き・プレビュー・公開を分岐できます。