formタグ

<form>タグはラジオボタン、テキストエリア等を配置するために使います。

説明

 <form>タグはフォーム部品と呼ばれるラジオボタン、テキストエリア等を配置し、選択や入力した値をCGIやPHPのページに送信したり、JavaScriptを動作させたりする事が出来ます。

 例えば、以下の図のようにテキストエリアに文字を入力して実行ボタンを押すと、test.jsでJavaScriptが動作し、結果を表示したり出来ます。

formのJavaScript利用例

構文

 <form>タグはHTMLボディー内に記述します。構文は以下の通りです。

<form method="データ送信" action="動作" name="名前">
ここにボタン等を配置
</form>

 methodはPOST、又はGETです。CGIやPHPにデータを渡す方法をPOSTなのかGETなのかを定義します。JavaScriptの場合は指定は不要です。

 actionはCGIやPHPファイル名を指定します。test.cgiやtest.php等です。JavaScriptの場合はaction="#"と記述するとCGIやPHPを実行せずにJavaScriptを動作させる事が出来ます。

 nameは識別するための名前でJavaScriptの処理でnameを使って値を取り出したり出来ますが、必須ではありません。

利用例

 JavaScriptを実行する場合の<form>タグの利用例は以下の通りです。

<form name="textform" action="#" onclick="alert('これがアラートです');return false;">
<button>ここをクリックするとアラートが出ます。</button>
</form>

 上記ではonclick=の後にクリックした時のJavaScriptを記述しています。;で区切ると複数の処理を記述出来ます。return falseを追加しているのはJavaScriptで処理が終わった際にページの再読み込みがされるため、ページのトップに戻ってしまいますが、これを防ぐ為にreturn falseを追加しています。

 上記を表示すると以下になります。

 JavaScriptを外部ファイルにして複雑な処理をさせる事も可能です。その場合はonclockの後に外部ファイルで定義した関数を指定します。例えば関数がtestであればonclock="test();"等となります。

 外部ファイルは<script>タグで読み込みが必要で、例えばファイル名がscript.jsの場合は以下のように記述します。

<script language="javascript" src="script.js"></script>

 ファイルがjsディレクトリにある場合はファイル名はjs/script.js、親ディレクトリにある場合は../script.jsと指定します。

ディスプレイ

 <form>タグで囲むとブロックボックスを示すため、タグの開始時と終了時に改行されます。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加