フォームの確認画面から戻るボタンを実装する際には、button の formaction 属性を使ってみよう

お問い合わせフォームなどで「入力画面 → 確認画面 → 完了画面」という流れを実装するとき、確認画面の「戻る」ボタンの実装に悩んだ経験はないでしょうか。

「戻る」ボタンの実装にはいくつかのアプローチがあります。それぞれの方法と課題を整理した上で、button 要素の formaction 属性を使ったシンプルな実装方法を解説します。

※ 本記事のコードはフォームの動作説明のために簡略化しています。実際の実装では CSRF 対策を必ず行ってください。

よく使われる「戻る」ボタンの実装方法と課題
formaction 属性とは
実装する画面の流れ
入力画面（input.php）の実装
確認画面（confirm.php）の実装
まとめ

よく使われる「戻る」ボタンの実装方法と課題

JavaScript を使う方法

最もシンプルなのは history.back() を使う方法です。

document.getElementById('back-btn').addEventListener('click', function() {
    history.back();
});

ブラウザの「戻る」ボタンと同じ動作をします。ただしブラウザのキャッシュに依存するため、環境によっては入力内容が消えてしまうことがあります。

より確実な方法として sessionStorage に入力値を保存しておき、入力画面に戻ったときに復元するアプローチもあります。ただし保存・復元のための JavaScript コードが別途必要になり、実装が複雑になります。

セッションを使う方法

PHP のセッションに入力値を保存しておく方法です。

// confirm.php：入力値をセッションに保存
session_start();
$_SESSION['form_data'] = $_POST;

// input.php：セッションから入力値を復元
session_start();
$formData = $_SESSION['form_data'] ?? [];

「戻る」ボタンは header(‘Location: input.php’) でリダイレクトするだけで済むため、入力値の消失は起きません。ただしセッションの開始・破棄の管理が必要になり、コードが増えます。

各方法の比較

history.back()：コード量は少ないが、ブラウザ依存で不安定
sessionStorage：中程度のコード量だが、JavaScript が無効だと動かない
セッション（PHP）：安定しているが、セッション管理のコードが必要
formaction：コード量が最も少なく、安定している

formaction を使う方法は、余分なコードを書かずに済み、JavaScript が無効な環境でも動作するのが利点です。

formaction 属性とは

formaction 属性は、button 要素や input[type=”submit”] に指定できる属性です。フォームの action 属性を上書きして、そのボタンが押されたときだけ別の URL にデータを送信できます。

通常、フォームは action 属性に指定した URL にデータを送信します。しかし formaction 属性を持つボタンを使うと、そのボタンが押されたときだけ別の URL に送信先を切り替えられます。

確認画面に「戻る」ボタンと「送信する」ボタンの2つを置き、それぞれ別の URL に送信するという使い方がまさにこのケースにあたります。

実装する画面の流れ

この記事では以下の3画面を実装します。

入力画面（input.php）
　↓ 「確認する」ボタンを押す
確認画面（confirm.php）← formaction を使った「戻る」ボタンをここに実装
　↓ 「戻る」ボタンを押す　　　↓ 「送信する」ボタンを押す
入力画面（input.php）　　　完了画面（complete.php）

フォームの項目はシンプルに「お名前」「メールアドレス」「お問い合わせ内容」の3つとします。

入力画面（input.php）の実装

入力画面は通常のフォームです。ただし、確認画面から「戻る」ボタンで戻ってきたときに入力内容が消えないよう、POST データがあれば各フィールドに値をセットします。

<form action="confirm.php" method="post">
    <div>
        <label>お名前</label>
        <input type="text" name="name"
            value="<?= isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8') : '' ?>">
    </div>
    <div>
        <label>メールアドレス</label>
        <input type="email" name="email"
            value="<?= isset($_POST['email']) ? htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8') : '' ?>">
    </div>
    <div>
        <label>お問い合わせ内容</label>
        <textarea name="message"><?= isset($_POST['message']) ? htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8') : '' ?></textarea>
    </div>
    <button type="submit">確認する</button>
</form>

ポイントは value に isset($_POST[‘name’]) の確認を入れている点です。初回表示（POST データなし）でも、戻ってきたとき（POST データあり）でも、どちらでも正しく動くようになっています。

また、htmlspecialchars() を使って XSS（クロスサイトスクリプティング）対策を施しています。ユーザーの入力値をそのまま HTML に出力するのは危険なため、必ず行うようにしましょう。

確認画面（confirm.php）の実装

確認画面が今回のメインです。ここで formaction 属性を使った「戻る」ボタンを実装します。

<form action="complete.php" method="post">
 
    <!-- 入力値を hidden フィールドで保持する -->
    <input type="hidden" name="name"
        value="<?= htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8') ?>">
    <input type="hidden" name="email"
        value="<?= htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8') ?>">
    <input type="hidden" name="message"
        value="<?= htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8') ?>">
 
    <!-- 確認内容を表示する -->
    <dl>
        <dt>お名前</dt>
        <dd><?= htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8') ?></dd>
 
        <dt>メールアドレス</dt>
        <dd><?= htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8') ?></dd>
 
        <dt>お問い合わせ内容</dt>
        <dd><?= nl2br(htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8')) ?></dd>
    </dl>
 
    <!-- 戻るボタン：formaction で input.php に送信先を上書きする -->
    <button type="submit" formaction="input.php">戻る</button>
 
    <!-- 送信ボタン：form の action である complete.php に送信する -->
    <button type="submit">送信する</button>
 
</form>

コードのポイント①：hidden フィールドで入力値を保持する

確認画面では入力値を hidden フィールドとして保持しています。「戻る」「送信する」のどちらのボタンを押しても、この hidden フィールドの値が一緒に送信されます。これにより、戻ったときに入力画面で値を復元でき、送信するときに complete.php に値を引き渡せます。

コードのポイント②：formaction 属性で戻り先を指定する

「戻る」ボタンに formaction=”input.php” を指定しています。このボタンが押されると、フォームの action 属性（complete.php）が無視され、代わりに input.php に POST データが送信されます。

<button type="submit" formaction="input.php">戻る</button>

たったこれだけで、JavaScript やセッションを使わずに「戻る」ボタンが実装できます。

コードのポイント③：nl2br() でお問い合わせ内容の改行を表示する

textarea に入力された内容には改行コードが含まれますが、HTML ではそのままでは改行として表示されません。nl2br() を使うことで、改行コードを
タグに変換できます。

まとめ

button 要素の formaction 属性を使うと、確認画面の「戻る」ボタンをシンプルに実装できます。

実装のポイントをまとめます。

確認画面のフォームの action は完了画面の URL を指定する
入力値は hidden フィールドで保持する
「戻る」ボタンに formaction で入力画面の URL を指定する
入力画面では POST データがあれば各フィールドに値をセットする
入力値の出力には必ず htmlspecialchars() を使う

JavaScript やセッションを使わずに実装できるため、コードがシンプルになります。フォームの確認画面を実装する際にはぜひ試してみてください。