HTMLのform要素にaction属性があることは知っているけれど、

そんな悩みを抱えてはいませんか？

今回は、action属性について学び直したいという方のために、

などについて、具体的に解説していきますね。

この記事を読むことで、HTMLでのaction属性の使い方がわかるようになりますよ。ぜひ最後まで読んでくださいね。

無料カウンセリングに申し込む

form要素とは？使う場所や記入の仕方

まずは、action属性が使われるformについて説明していきます。

formは、ユーザーが入力・送信できるフォームを作るために使われる要素です。

お問い合わせフォームやログインフォームなどを見たことがあるかと思います。

実際のコードでは、formタグの中に、inputタグやtextareaタグ、buttonタグなどを設置して、フォーム全体を作っています。

<form action="" method="post">
<div class="form_item">
<label for="name">お名前：</label>
<input type="text" id="name" name="name">
</div>
<div class="form_item">
<label for="mail">メールアドレス：</label>
<input type="email" id="mail" name="mail">
</div>
<div class="form_item">
<label for="message">メッセージ：</label>
<textarea id="message" name="message"></textarea>
</div>
<button type=“submit>送信</button>
</form>

フォームで入力された情報は、送信ボタンを押すとWebサーバーに送られます。

この送信パスを書く場所がaction属性でした。

未経験でも確実にプログラミングスキルを身につけられる！
【DMM WEBCAMP】では、専属コーチが卒業まで伴走します！

✔短期間で効率的にプログラミングスキルを身につけたい
✔プログラミングを独学で進めていくのが不安
✔家での時間を有効に使ってスキルアップがしたい
といった方におすすめです！

＼実践的なスキルが身に付くカリキュラム／

action属性とは？どんな特徴がある？

action属性は、form要素の中の属性の1つで、フォームに入力された情報の送信先を指定します。

指定する送信先は、サーバーにあるPHPなどのプログラムファイルになることが多いです。

例えば、送信先が入力内容の確認ページ（confirm.php）である場合、

<form action=”confirm.php” method=”post”>

というように書きます。

ただ、セキュリティ上の問題で、現在は、action属性の値を空にした方が良いということになっています。

HTML5より前はaction属性の指定が必須だったため、他の対処法が必要でしたが、HTML5以降では値を空にしたり、属性自体を省略したりすることができます。

action属性を指定しない場合

値を空、もしくは属性自体がない場合は、フォームが置かれた自身のページに送信されます。

実際にコードを書いてブラウザで試してみてください。

自身のページに送信されるということがわかりやすいように、method属性の値を「get」にしてみましょう。

getを指定すると、URLの最後に送信したデータが加えられます。

<form action="" method="get">
<div class="form_item">
<label for="name">お名前：</label>
<input type="text" id="name" name="name">
</div>
<div class="form_item">
<label for="mail">メールアドレス：</label>
<input type="email" id="mail" name="mail">
</div>
<button type=“submit>送信</button>
</form>

試しに「太郎」「sample@gmail.com」と入力するとURLはそのままで末尾に「?name=太郎&mail=sample%40gmail.com」が付け足されます。

action属性は空欄にすべき？その理由は？

action属性の値についてもう少し詳しく説明します。

セキュリティ上の問題からaction属性を指定しない方が良いというお話でした。

具体的にどういった問題が起きるのでしょうか。

action属性に指定したものは、ブラウザのデベロッパーツールなどを利用すれば、第三者が簡単に見ることができてしまいます。

ここに、送信先のプログラムファイルの場所を書いてしまうと、悪意を持った人に情報を与えてしまい、攻撃を受ける可能性が出てくるのです。

送信先のプログラムファイルはWebサーバーに置かれています。

Webサーバーのプログラムファイルは、後から見ても混乱がないように管理者が階層を分けたり、ファイル名を付けたりしていることが多いです。

PHPの各プログラムファイルはPHPフォルダの中でまとめて格納、画像はimgフォルダに格納というようなことです。

そのため、第三者がaction属性の記述を見たときに、他のプログラムファイルの場所やファイルの階層構造が大方予測ができてしまいます。

その結果、セキュリティホールへの攻撃を許すことにつながってしまうのです。

今回の記事に限らず、HTML内に重要なプログラムファイルの設置場所を書くことは避けた方が良いですね。

HTML5より前は他の方法で対処していましたが、今では値を空にするか属性自体を省略することができます。

action=””を指定すると、ブラウザの環境によってはエラーになってしまうので、特別な理由がない限り、属性自体を書かない方が良いでしょう。

form要素の送信先を操作する方法

それでは、フォームに入力された情報はどうやってサーバーに送信するのでしょうか？

フォーム内のボタンをクリックしたときに、「action=””」であれば、自身のページへと送信される仕組みになっています。

これは、HTMLだけでなくPHPファイルでも同じ仕組みです。

PHPファイルを再度読み込んだ場合、ファイルに記述されたプログラムに応じてWebページを再表示させるようにしておきます。

入力された情報は、PHPプログラムでセキュリティ処理を行い、サーバーへと送信されます。

こうすることで、ユーザーにはPHPファイルの場所が知らされることなく、フォームに入力された情報を扱うことができます。

PHPの他に、Javascriptを使って動的な処理を行い、送信先がユーザーにはわからないように作ることも可能です。

今回は、HTMLをメインとした解説なので、プログラム言語については詳しく書きませんが、興味がありましたら、ぜひ勉強してみてください。

まとめ：action属性は指定せず、プログラムでのデータ送信が大切

今回は、HTMLでのaction属性の使い方について紹介してきました。

フォームを設置するのみであれば、HTMLだけでも大丈夫なのですが、実際に機能として動かす場合には、他のプログラム言語の知識が必要になります。

action属性のお話もその一部でした。

HTMLコーディングのみであれば、必須ではないですが、こういうことがあるということは把握しておいて損はないはずですよ。

今回の記事が少しでも参考になれば幸いです。

【DMM WEBCAMP】は受講生の97%が未経験からのスタート！
充実のサポート体制で、プログラミングスキルを確実に身につけられます！

✔一人ひとりに合わせた学習計画で進められるため、仕事や学校と両立できる
✔未経験者のために開発された実践的なカリキュラムを用意
✔︎専属コーチが卒業まで学習をサポート

＼目的別で選べる3つのコース／