<FORM>入力・送信フォームの作成

<FORM>では、問い合わせやアンケート、入会登録などのオンラインショッピングのようなユーザーが入力したデータを送信する仕組み(入力・送信フォーム)をwebページ上に作る事ができます。 ただしユーザーから送信されたデータを利用するには、送信先に別途CGIプログラムを設置する必要があります(もしくはphp)。 なお入力された内容や送信先、送信方法については、この<FORM>タグの属性で指定できます。

フォームの作り方ですが、まずは<FORM>~</FORM>の間に<P>タグなどのブロックレベル要素を配置し、その中に<INPUT><BUTTON><SELECT><TEXTAREA>タグなどを配置することで、チェックボックス・各種ボタン・テキスト入力欄などを作ることができます。

ユーザーが入力した内容は、設置した送信ボタン(<input>または<button>にtype="submit"を指定したもの)が押されるとフォームの内容が送信されます。

送信形式には「get」「post」の2種類があり、getを指定するとaction属性で指定したurlの後に「?」で連結された状態で入力されたデータが送信されてきます。 postを指定するとurlに連結されることなく、データとして送信されてきます。 これは日本語で大量のデータが送信される時などに向いています。

また<INPUT>type="file"を使用しファイルを送信する場合などは、enctype属性で指定するMIMEタイプ(データ形式)を「multipart/form-data」と設定して下さい。 初期値は「application/x-www-form-urlencoded」となっており、通常はこれでCGIの処理が行われています。

なおaction属性は必ず指定して下さい。通常は送信されたデータを処理するためのプログラムのURLを指定しますが、ここに「mailto:sample@yahoo.co.jp」のようにメールアドレスを指定すると、データ(入力内容)をメールへ送信することができます。ただし環境によっては正しく送信されない場合もあります。

使用した時の例

<form action="/cgi-bin/sample.cgi" method="post">
  <p>名前:<input type="text" name="name"></p>
  <p>性別:<input type="radio" name="sex" value="man">男
          <input type="radio" name="sex" value="woman">女
  </p>
  <p>お問合せ<br />
    <textarea name="toiawase" cols="60" rows="5">
    </textarea>
  </p>
  <p><input type="submit" value="送信"></p>
</form>

ブラウザ上の表示例

名前:

性別:

お問合せ

書式

  • <form action="url" method="送信形式" enctype="MIMEタイプ" target="ウィンドウ名">~</form> ・・・・・・ フォームを作る

url:送信されたデータを処理するCGI・PHPのURL
送信形式:get(初期値)またはpost
MIMEタイプ:postで内容を送信する際のデータ形式(MIMEタイプ)
ウィンドウ名:送信した結果を表示するウィンドウ、またフレーム

属性

action="url" データの送信先url(cgiなど)。「mailto:メールアドレス」と指定するとデータが指定したメールアドレスに送信される
method="get" 入力されたデータの送信形式を指定。一般的にはpostを指定
  • get(初期値)・・・urlとフォームのデータをセットで送信
  • post・・・フォームのデータのみ送信
enctype="mimeタイプ" postを指定した場合のフォームの送信方法(mimeタイプ)を指定。
target="" フォームの内容を送信した結果を表示するウィンドウ、またはフレームの指定
  • _blank・・・新しいウィンドウに表示
  • _self・・・現在のウィンドウに表示
  • _parent・・・親フレームに表示
  • _top・・・フレームを解除して表示
  • ウィンドウ名・フレーム名・・・任意のウィンドウ・フレームに表示
name="" スクリプトなどから参照するためにフォームに名前を指定
accept="mimeタイプ" データのMIMEタイプ
accept-charset="" サーバーが利用する文字コード

対応ブラウザなどのデータ

形式 <form action="">~</form> カテゴリ フローコンテンツ / パルパブルコンテンツ
親要素 子要素にフローコンテンツを含める要素 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
分類 ブロックレベル要素
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

HTML5ではaccept属性が廃止。