構文

<form>
<div>
    ：
</div>
</form>

説明文

　Webサイトの中には，ユーザーが入力したデータをサーバーに引き渡し，それをサーバー側で処理を行うことができる。その処理の内容にユーザーに合ったWebコンテンツをユーザーに返すことができる。このようにして，インタラクティブなWebコンテンツを作成できる。例えば，入力した単語に関連するWebページを検索したり，掲示板のようにメッセージを投稿するなどできる。

　この際，Webサーバーに送るデータを送る際に利用するのが<form>タグである。<form>?</form>内にWebサーバーに送信するテキスト・エリアやボタンなどといったタグを記述する。また，送信を行う為に<input>タグに「type="submit"」属性を付加して，送信用のボタンを付ける。

　また，<form>タグに「action」属性にデータを受け渡すプログラムを指定する。さらに，「method」タグにはデータを送信する方法を指定する。「GET」メソッドを指定するとURLにデータを付加し，「POST」メソッドを指定するとHTMLの本文にデータを付加して送信する。

サンプル

HTMLソース

<form method="POST" action="fortune.cgi">
<div>
  <p>ニックネーム：<input type="text" name="nickname"></p>
  <p>誕生日：<input type="text" name="year" size="4">年
     <input type="text" name="month" size="2">月
     <input type="text" name="day" size="2">日</p>
  <p><input type="submit" value="占う">
  <input type="reset" value="クリアー"></p>
</div>
</form>

ブラウザ表示例

ニックネーム：

誕生日：年月日

対応状況

HTML IE Firefox Opera
4 strict 4 Transitional 5 6 7 2 3 8 9
○ ○ ○ ○ ○ ○ ○ ○ ○

要素，タグ

タグ要素 ブロック要素
包括可能要素 HTML 4 Strict：ブロック要素（<form>を含まない），<script>
HTML 4 Transitional：ブロック要素（<form>を含まない），インライン要素
タグ記述条件 開始タグ：必須　終了タグ：必須

属性

よく利用する属性

属性 意味 対応
HTML 4s HTML 4t その他
action=ファイル <nitton>のsubmitタイプのボタンを押されるなどした場合に，データを送信するプログラムを指定する ○ ○  
method=メソッド データの送信方法を指定する。「GET」メソッドはURLの最後にクエリー文字としてデータを付加し，「POST」メソッドではHTTPのボディー部分にデータを格納して送る ○ ○  
accept=MIMEタイプ 扱えるデータ形式をMIMEタイプで指定する。複数指定する場合はカンマで区切りながら列挙する ○ ○ 　

その他の属性

属性 意味 対応
HTML 4s HTML 4t その他
accept-charset=文字コード フォーム内で利用可能な文字コード等を指定する。複数指定する場合はカンマで区切りながら列挙する ○ ○ 　
autocomplete=値 オートコンプリート機能の有効・無効を切り替える。「on」の場合は有効，「off」の場合は無効となる × × IE
class=クラス名 このタグのクラス名。CSSでスタイルを指定する場合などに利用される ○ ○ 　
dir=方向 タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に，rtlを指定すると「右から左」に表示する。しかし，多くのWebブラウザでは，文字コードを自動判別し，自動的に表示方向を決定している。そのため，日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する ○ ○ 　
enctype=エンコード データのエンコード方式を指定する ○ ○ 　
id=ID タグのID。ダイナミックHTMLでタグを操作する場合や，Java Scriptでのタグの制御，個別にスタイルを指定する場合などに利用する ○ ○ 　
lang=言語 タグ内に記述した言語。例えば，日本語の場合は「ja」，英語の場合は「en」を指定する ○ ○ 　
style=スタイル タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 ○ ○ 　
target=ターゲット 表示のターゲットを指定する。「_blank」を指定するとあらたなウインドウを開きそこに表示する。「_self」を指定すると、リンク元となるコンテンツを表示しているウインドウに表示する。「_top」を指定するとこのフレームを解除して最上位となるウインドウに表示する。「_parent」を指定すると、フレームの全体を解除し表示する。また、特定のフレームに表示する場合はフレーム名を指定する ○ ○  
title=タイトル タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは，タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する ○ ○ 　

マウスやキーボードの状況変化に関わる属性

属性 意味 対応
HTML 4s HTML 4t その他
onclick=スクリプト このタグに対応する表示結果にマウスの左ボタンをクリックした場合に，指定したスクリプトを実行する ○ ○  
ondblclick=スクリプト このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に，指定したスクリプトを実行する ○ ○  
onmousedown=スクリプト このタグに対応する表示結果にマウスのボタンで押下した場合に，指定したスクリプトを実行する ○ ○  
onmouseup=スクリプト このタグに対応する表示結果にマウスのボタンを離した場合に，指定したスクリプトを実行する ○ ○  
onmouseover=スクリプト このタグに対応する表示結果にマウス・ポインタが乗った場合に，指定したスクリプトを実行する ○ ○  
onmousemove=スクリプト このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する ○ ○  
onmouseout=スクリプト このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する ○ ○  
onkeypress=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する ○ ○  
onkeydown=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する ○ ○  
onkeyup=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する ○ ○  
onsubmit=スクリプト <button>タグで指定した「submit」タイプのボタンが押された場合に，実行するスクリプトを指定 ○ ○  
onreset=スクリプト <button>タグで指定した「reset」タイプのボタンが押された場合に，実行するスクリプトを指定 ○ ○  

関連項目