HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのformaction属性とは？使い方とサンプルコードをわかりやすく解説

HTMLのformaction属性は、1つのフォーム内に複数の送信ボタンを配置し、ボタンごとに異なる動作をさせたい場合に活用できる属性です。例えば、フォームに2つの送信ボタンがあるとき、それぞれのボタンから別々のページへデータを送信することが可能になります。

formaction属性の基本的な仕組み

formaction属性は、<button>要素や<input type="submit">要素に対して指定でき、指定されたボタンがクリックされた際の送信先URLを個別に設定します。

重要なポイントとして、formaction属性はフォーム全体に適用されるaction属性の値を上書き（オーバーライド）するという点が挙げられます。つまり、フォームタグにaction属性が設定されていても、formaction属性を持つボタンが押されれば、そのボタンに指定されたURLへデータが送信されます。

注意： formaction属性は、Internet Explorer 9およびそれ以前のバージョンではサポートされていません。古いブラウザへの対応が必要な場合は、代替手段を検討してください。

formaction属性の使用例

以下のコードを実行すると、HTMLにおけるformaction属性の実際の使い方を確認できます。このサンプルでは、デフォルトの送信ボタンと、別ページへ送信するボタンの2種類を配置しています。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML formaction attribute</title>
    </head>

    <body>
        <form action = "/new1.php" method = "get">
            Student name: <input type = "text" name = "name"><br>
            Student Subject: <input type = "text" name = "subject"><br>
            <button type = "submit">Submit</button><br>
            <button type = "submit" formaction = "/new2.php">Another page</button>
        </form>
    </body>
</html>

コードの解説

  • フォーム全体の送信先はaction="/new1.php"として設定されています。
  • 最初の「Submit」ボタンにはformaction属性がないため、クリックするとフォームのaction属性に従い「/new1.php」へデータが送信されます。
  • 2つ目の「Another page」ボタンにはformaction="/new2.php"が指定されているため、このボタンをクリックした場合のみ「/new2.php」へデータが送信されます。

このようにformaction属性を使えば、JavaScriptなどを使わずにHTMLだけで複数の送信先を持つフォームを簡単に実装できます。検索条件ごとに処理ページを切り替えたい場合や、「保存」と「下書き保存」のように異なるアクションを1つのフォームで実現したい場合に特に便利です。

  1. HTMLのmultiple属性とは？複数選択を可能にする使い方を徹底解説

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性はブール型（真偽値）属性であり、<input>要素と<select>要素の両方で使用できます。特に、HTMLフォームで複数のファイルをアップロードしたい場合にmultiple属性が活躍します。また、この属性は「email」および「file」タイプの入力フィールドに対応しています。multiple属性の主な特徴fileタイプ：ファイル選択ダイアログで複数のファイルを同時に選択可能になります（CtrlキーやShiftキーを押しながらクリック）。emailタイプ：カンマ区切

  2. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali