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

HTMLフォームのaction属性を徹底解説!基本構文から実例まで初心者向けガイド

HTMLのaction属性は、Webページ上でフォームが送信されたときに、データがどのように処理されるかを定義する重要な属性です。action属性の値には、フォームの内容を処理するWebリソース(URL)を指定します。

サイトやWebアプリケーションでフォームを作成してユーザーからデータを受け取るとき、「送信されたデータを何かしらの処理に活用したい」と考えるのは自然なことです。そんなときに活躍するのが、このformのaction属性です。

まず、HTMLでフォームを作成する基礎知識を確認しておきましょう。フォームの内容は基本的に<form>要素で囲みます。開始タグにはいくつかの属性を指定でき、そのうちのひとつがactionです。

action属性は、フォームが送信されたときにデータの送り先を指定するために使います。つまり、actionの値はフォームを処理するページのURLということになります。なお、action属性で指定したWebリソースが、method属性で指定したリクエスト方式(GET・POSTなど)を受け付けられることを必ず確認しておきましょう。

action属性の基本構文

action属性の書き方は非常にシンプルです。以下の構文を見てください。

<form action="/submit.php">
 
</form>

このように、action属性は開始タグ<form>の中に記述します。この属性は、多くの場合method属性と組み合わせて使用されます。

method属性のデフォルト値は「get」です。つまり、特に指定しない場合、フォーム送信時にはHTTP GETリクエストでデータが送信されます。「post」を使いたい場合は、開始タグに「method="post"」と指定しましょう。

フォームのデータは、送信ボタンがクリックされたタイミングで、actionで指定したURLへ送られます。

HTMLフォームaction属性の実例

それでは、具体的なコード例を見てみましょう。

<form action="process.html" method="get">
 <label for="username">ユーザー名</label>
 <input type="text" id="username" name="username"><br><br>
 <label for="email">メールアドレス</label>
 <input type="email" id="email" name="email"><br><br>
 <input type="submit" value="送信">
</form>

この例では、入力されたユーザー名とメールアドレスのデータが「process.html」というページに送信されます。ユーザー名とメールアドレスのinput要素はそれぞれtype「text」「email」で定義されており、type「submit」のボタンをクリックすると、データがactionで指定したURLへ送信される仕組みです。

それでは、上記のフォームコードを実際のHTMLファイルに貼り付けてみましょう。次に、同じフォルダ内に「process.html」という名前の別ファイルを作成します。このファイルには以下の内容を記述してください。

<html>
 <head>
 <meta charset="UTF-8">
 <title>Process</title>
 </head>
 <body>ここは送信先のprocessページです</body>
</html>

このコードは、ページが読み込まれたときにテキストを表示するだけのシンプルなWebページを定義しています。先ほど作成したフォームに戻り、実際にデータを入力してみましょう。

HTMLフォームのaction属性を徹底解説!基本構文から実例まで初心者向けガイド

送信ボタンをクリックすると、自動的にprocess.htmlページへ遷移したはずです。さらに、ブラウザのURLバーに注目してみてください。「?」記号以降に余分なデータが表示されていることに気づきましたか?これはクエリパラメータと呼ばれるもので、GETリクエストを指定したため、データがクエリパラメータとして渡されているのです。

HTMLフォームのaction属性を徹底解説!基本構文から実例まで初心者向けガイド

この例を見て「あまり実用的ではない」と感じたかもしれません。それはその通りです。通常、action属性はフォームの内容をサーバーサイドのページへ送るために使われます。たとえば、「process.php」というPHPファイルを指定するのが一般的です。

このprocess.phpが、受け取ったデータに対してあらゆる処理を行います。データベースへの保存やイベントへの登録など、その用途は自由自在です。PHPは強力なサーバーサイドスクリプト言語で、Web開発の現場で広く採用されています。WordPressを使ったことがある方なら、その裏側でのデータ処理の多くがPHPによって行われていることもご存じでしょう。

PHPについてさらに学びたい方は、ぜひ「PHPの学習方法ガイド」もあわせてチェックしてみてください。

action属性は必須なのか?

HTML4の時代であれば、答えは「はい」でした。しかし現在のHTML5では、action属性の指定は必須ではありません。action属性を持たないformタグの場合、データはフォーム自身のページへ送信されます。

なぜこのような仕様になっているのでしょうか? シングルページアプリケーション(SPA)の登場により、JavaScriptを使ってフォームデータを処理したいケースが増えたためです。ReactやAngularといったフレームワークでデータを処理する場合もあります。

バニラJavaScript(Vanilla JS)を使用する場合は、フォームが送信されたときに発火するイベントリスナー(submitイベント)を追加することで、これを実現するのが一般的です。

まとめ

HTMLのform action属性は、フォーム送信時にフォームの内容がどう扱われるかを定義する属性であり、値としてURLを指定します。method属性と組み合わせることで、GET・POSTなどの送信方法も柔軟に制御できます。

Web開発者を目指している方は、完全版の「HTML学習ガイド」もぜひご覧ください。HTMLの効率的な学習方法に関する専門家のアドバイスや、おすすめのオンライン講座・学習リソースの一覧を掲載しています。

  1. HTML DOM ストレージの setItem() メソッドの使い方

    HTML DOM の Storage setItem() メソッドは、指定したキー名と値のペアをストレージオブジェクトに保存（追加・更新）するために使用されます。同じキー名がすでに存在する場合は、古い値が新しい値で上書きされます。データは永続的に保持される localStorage、またはブラウザセッション中のみ有効な sessionStorage のどちらにも保存できます。構文Storage setItem() メソッドの構文は以下のとおりです。localStorage.setItem(keyname, value);またはsessionStorage.setItem(keyname, va

  2. HTML DOMのcontains()メソッドとは？構文と使い方をサンプルコード付きで解説

    HTML DOMのcontains()メソッドは、あるノードが指定したノードの子孫であるかどうかを調べるために使用されるメソッドです。ここでいう「子孫」には、直接の子要素だけでなく、孫要素やひ孫要素など、どの階層の深さのノードも含まれます。判定結果は真偽値（boolean）として返され、子孫であれば true、そうでない場合は false となります。 構文 HTML DOM contains()メソッドの基本構文は以下のとおりです。 node.contains(givenNode) givenNode は必須パラメータで、node に含まれているかどうかを調べたい対象のノードを指定します。