<formは入力データを送信するHTMLタグ

<formタグは、サイト内検索や問い合わせフォームなどでよく使用されていますが、ユーザーからの入力データを送信するためのHTMLタグです。

例えば、サイト内検索の場合、一般的には<form>と<input>の要素を組み合わせて、以下のように使用します。

<form action="/sample.php" method="get">
 <input type="text" name="query" placeholder="サイト内を検索">
 <input type="submit" value="検索">
</form>コピーボタンコピーチェックボタン

あるいは、名前を送信する際など、何を入力するのかの<label>の要素なども組み合わせて使用します。

<form action="/sample.php" method="get">
 <label for="name">名前:</label>
 <input type="text" id="name" name="name">
 <input type="submit" value="送信">
</form>コピーボタンコピーチェックボタン

他にも、テキスト入力欄の<textarea>、あるいはドロップダウンリストの<select>と<option>、送信ボタンの<button>などもありますが、代表的な<form>、<input>、<label>の要素を覚えておくとよいでしょう。

これらのうち、<input>については閉じタグの必要のない空要素になります。

  • <form></form>
  • <input> → 空要素
  • <label></label>

ただし、要素の属性には様々な種類があり複雑です。

要素<form>、<input>の主な属性値の役割

■<form>タグの主な属性

<form>タグでよく見かける組み合わせは、action属性で値がURL、method属性で値がgetなどです。

<form action="/sample.php" method="get">
</form>

action： 入力データ送信先のURL

action属性には、データを送信するURLを指定します。送信後、送信先のページのスクリプトがデータ処理した結果としてHTMLが生成され、そのHTMLがブラウザに表示されます。データ送信を伴うため、セキュアなhttpsのURLを指定することをおすすめします。

method： データ送信方法を指定（GETまたはPOST）

method属性には、GETメソッドとPOSTメソッドがありますが、GETメソッドの場合、URLの末尾にパラメータが追加されて送信されます。method属性が省略された場合、デフォルトの送信方法はGETとなります。

/sample.php?query=seo

遷移されたURLに表示されるため、パスワードなどを送信する際には適していません。

一方、POSTメソッドの場合、データはURLに表示されず、HTTPリクエストのボディ内に送信されるため、表示させたくないデータを送信するのに適しています。

■<input>タグの主な属性

例えば、以下の要素<input>には、type属性とname属性とplaceholde属性が指定されていますが、それぞれの値には「text」、「query」、「サイト内検索」が指定されています。

<input type="text" name="query" placeholder="サイト内を検索">

type： 入力欄の種類（例：text、password、submitなど）
name： 入力欄の名前を指定
placeholder: デフォルトで表示するテキストを指定
value： 入力欄の初期値や送信する値

これらは、<input type="submit">ボタンを押すと、<input type="text">に入力されたデータが、上記の<form action="URL">で指定されたURLに送信されます。その他、テキスト入力欄にデフォルトで表示されている文字列は、placeholder="サイト内を検索"などと指定されます。

<input>にてユーザーが入力するデータを収集し、それらの<input>要素を<form>タグで囲んでコンテナとし、入力フォームを作成することになります。

ちなみに、<input>は空要素のため、閉じタグは必要ありません。

入力データの送信先ページではプログラミング言語が必要

上記のように、<form>タグはユーザーが入力したデータをサーバーに送信するためのHTMLタグになります。

そのため、基本的にはユーザーから送信されたデータを受け取り、そのデータをサーバー側で処理し、適切なレスポンスを返す必要があり、送信先のページでは動的な処理をするためのサーバーサイドのPHPファイルなども別途に必要になります。

具体的には、以下のような場合、<input type="text">の箇所にてユーザーからの入力を収集し、<input type="submit">のボタンを押すと<form action="/sample.php">のURLに入力データを送信します。

<form action="/sample.php" method="get">
<input type="text" name="query" placeholder="サイト内を検索">
<input type="submit" value="検索">
</form>コピーボタンコピーチェックボタン

これはリンクタグのように、ボタンを押すと/sample.phpのページに遷移しますが、実際には送信したデータを処理した結果としてHTMLがサーバーサイドで生成され、そちらが表示されることになります。

加えて、<input name="query">の箇所でname属性を指定することにより、遷移先の/sample.php?query=hogeのような形式になります。

例えば、seoなどと入力した場合、「/sample.php?query=seo」となります。

遷移先のPHPページにて、クエリを取得するためには、このname属性もしてしておく必要があります。仮に、name属性の値がqueryだった場合、遷移先のPHPページでは、以下のようなサーバーサイドの言語を使用してクエリを取得して処理することになります。

if (isset($_GET['query'])) {
$searchQuery = $_GET['query'];
// 以下、$searchQuery を使用して検索処理
}コピーボタンコピーチェックボタン

また、メールフォームなどで直接メールを送信する場合には、データベースは特に必要ありませんが、問い合わせフォームやアンケートフォームなどでは、送信されたデータを保存するデータベースとの連携も必要になります。

一方で、Googleのサイト内検索を設置する際など、サードパティのツールを使用する際には、送信先にてデータを処理するファイルが用意されているため、HTMLの<formタグをサイト内に設置するだけすみます。

どこまで自分で対応するのかによっても違いはありますが、<formのHTMLタグ自体はそれほど難しくはないものの、一般的にはサーバーサイドのPHPファイルやデータベースとの連携も必要になります。加えて、<formタグを用いたデータ送信の全体的な実装には、入力データの検証やクリーニングなど、セキュリティ対策の部分も必要になるため、難易度が高くなる傾向があります。

トップページ　⁄　HTMLタグ　⁄　<formタグ
関連ページ