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

【HTML】formaction属性でフォーム送信時のデータ送信先を設定する方法

HTMLでは、formaction属性を使用することで、フォームが送信されたときにフォームデータを送信する先（URL）を設定できます。

formaction属性とは

通常、フォームの送信先は<form>要素のaction属性によって決まります。しかし、formaction属性を<button>要素や<input type="submit">要素に指定すると、そのボタンがクリックされた場合に限り、action属性の設定を上書きして、指定したURLへデータを送信できます。

この仕組みを活用すれば、1つのフォームから複数の送信先を使い分けることが可能になります。たとえば、「保存」と「下書き保存」のように、同じ入力内容を異なる処理ページへ振り分けたい場合に便利です。

サンプルコード

以下のコードは、formaction属性を実装した例です。実際にブラウザで動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML formaction属性の例</title>
   </head>
   <body>
      <form action = "/new1.php" method = "get">
         学生名： <input type ="text" name = "name"><br>
         科目： <input type = "text" name = "subject"><br>
         <button type = "submit">送信</button><br>
         <button type = "submit" formaction = "/new2.php">別のページへ送信</button>
      </form>
   </body>
</html>

コードの解説

  • フォーム全体の既定の送信先は、action="/new1.php"で指定されています。
  • 最初の「送信」ボタンをクリックすると、フォームデータは/new1.phpへ送信されます。
  • 2つ目の「別のページへ送信」ボタンにはformaction="/new2.php"が指定されているため、こちらをクリックした場合は/new2.phpへデータが送信されます。

対応ブラウザと注意点

formaction属性はHTML5で導入された属性で、Chrome・Firefox・Safari・Edge・Operaなどの主要なモダンブラウザで利用できます。一方、Internet Explorerではサポートされていないため、レガシーブラウザへの対応が必要な場合は注意してください。

また、formmethod属性（GET／POSTの切り替え）やformenctype属性（エンコード方式の指定）など、他のフォームオーバーライド属性と組み合わせることで、より柔軟なフォーム設計が可能になります。

  1. HTMLのnovalidate属性とは？フォームバリデーションを無効化する理由と使い方

    HTMLのnovalidate属性は、フォーム送信時に入力内容の検証（バリデーション）を行わないようブラウザに指示するための属性です。ブール型（真偽値）属性のため、値を記述せずにタグ内へ指定するだけで有効になります。 novalidate属性を使うメリット この属性が特に役立つのは、ユーザーがフォームへの入力途中で内容を保存しておきたいケースです。バリデーションを無効にしておけば、未入力の項目があってもエラーにならず、その時点での入力内容を保存できます。後日フォームに戻って続きを入力し、改めて送信すればよく、再開時に入力済みの全項目を検証し直す必要もありません。 また、JavaScriptで独

  2. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動