投稿日： 2020年3月26日
最終更新日： 2023年3月28日

【JavaScript要らず】HTML5で追加されたbuttonタグのformaction属性でSubmit先のURLを簡単に変更する方法【たった1行】

YouTubeも見てね♪

Anker PowerCor

Anker PowerCore モバイルバッテリー 20000mAh iPhone iPad Android

created by Rinker

Anker

¥3,990 (2025/01/05 12:09:11時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー！

モンスターエナジー 355ml×24本 [エナジードリンク]

アサヒ飲料モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker

モンスター

¥4,718 (2025/01/05 12:33:40時点 Amazon調べ-詳細)

脳を活性化させるにはこれ！

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

created by Rinker

スクウェア・エニックス(SQUARE ENIX)

¥3,940 (2025/01/05 12:41:47時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

Bauhutte ( バウヒュッテ ) 昇降式 L字デスクブラック BHD-670H-BK

created by Rinker

Bauhutte(バウヒュッテ)

¥15,855 (2025/01/05 12:09:12時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！

BANDAI SPIRITS ULTIMAGEAR 遊戯王千年パズル 1/1スケール

created by Rinker

BANDAI SPIRITS(バンダイスピリッツ)

¥10,429 (2025/01/05 12:09:13時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ！！

MOFT X 【新型ミニマム版】 iPhone対応スマホスタンド

created by Rinker

MOFT

Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！

サンディスク microSD 128GB

サンディスク microSD 128GB UHS-I Class10 Nintendo Switch SanDisk Ultra SDSQUA4-128G-EPK

created by Rinker

SanDisk

¥3,279 (2025/01/05 12:33:41時点 Amazon調べ-詳細)

スマホからSwitchまで使える大容量MicroSDカード！

1 フォームのポストをボタンによって動的に切り替えたい
- 1.1 JavaScriptで上書きするのが一般的だった
- 1.2 HTML5の登場により1行追加するだけで実現可能
2 やり方
- 2.1 サンプルコード
  - 2.1.1 確認
  - 2.1.2 formタグにactionが無くても問題ない
3 終わりに

フォームのポストをボタンによって動的に切り替えたい

JavaScriptで上書きするのが一般的だった

HTMLでフォームを作成している場合、要件によっては通常のサブミットとは別のURLにフォーム内容を送信したい場合があると思います。

そんなとき、今までは以下のようにjQueryなどのJavaScriptを使ってボタンが押下された際にformのURLを動的に書き換えた上でsubmitする、といった方法が一般的でした。

...
(略)
...
<form method="post">
...
(略)
...
  <button type="button" onclick="formSubmit('./draft.html')">下書き</button>
  <button type="button" onclick="formSubmit('./create.html')">作成</button>
</form>
...
(略)
...
function formSubmit(url) {
  $('form').attr('action', url);
  $('form').submit();
}
...
(略)
...

...

(略)

...

...

(略)

...

</form>

...

(略)

...

function formSubmit(url) {

$('form').attr('action', url);

$('form').submit();

}

...

(略)

...

HTML5の登場により1行追加するだけで実現可能

しかしそんな話も過去の話。

なんと、HTML5にて追加されたbutton要素のformaction属性を利用することでJavaScriptを一行も書く必要なく同様の処理が可能になったのです！

Definition and Usage
The formaction attribute specifies where to send the form-data when a form is submitted. This attribute overrides the form’s action attribute.

The formaction attribute is only used for buttons with type=”submit”.HTML button formaction Attribute

サポートしているブラウザ等は公式サイトを見ていただければなと思います。

では、実際に試してみましょう！

やり方

サンプルコード

今回は以下のようなフォームを用意し、下書きボタンを押下した際にのみ、formのaction属性を上書きするようにしてみようと思います。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登録フォーム</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href="">
</head>

<body>
    <h1>フォーム</h1>
    <form method="POST" action="./create.html">
        <p>
            <input type="submit" value="下書き" formaction="./draft.html" />
            <input type="submit" value="作成" />
        </p>
    </form>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>登録フォーム</title>

</head>

<body>

<p>

</p>

</form>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>作成完了</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href="">
</head>

<body>
    <h1>作成完了</h1>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>下書き完了</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href="">
</head>

<body>
    <h1>下書き完了</h1>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>下書き完了</title>

</head>

<body>

<h1>下書き完了</h1>

</body>

</html>

確認

では、実際に動かしてみましょう。

期待通りの動きがJavaScript無しで実現出来ましたね！

これは簡単かつ便利過ぎる・・・！

formタグにactionが無くても問題ない

また、以下のようにformタグにaction属性をつけなくても問題ありません。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登録フォーム</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href="">
</head>

<body>
    <h1>フォーム</h1>
    <form method="POST">
        <p>
            <input type="submit" value="下書き" formaction="./draft.html" />
            <input type="submit" value="作成" formaction="./create.html" />
        </p>
    </form>
</body>

</html>