form要素

Updated / Published

form要素はフォーム全体を定義するブロックレベル要素です。form要素だけでは、データを入力したり受け取ることもできません。form要素の間にテキスト入力欄や選択欄などのコントロール（フォームを構成するオブジェクトのこと）を指定し、入力されたデータの送信先を action属性で指定します。

データの送信先には、主にプログラムの URI が指定されます。そして、入力されたデータを送信するとウェブサーバを通して、データはそのプログラムへと渡されます。このようなウェブサーバとプログラムの間のやり取りの手順を CGI と呼び、この手順によって実行されるプログラムを CGIプログラムと呼びます。CGIプログラムは Perl や PHP 、Rubyで作成されることが多いですが、他にも C や Java 等のウェブサーバにインストールされているプログラミング言語を使って作成することができます。たとえば、ブログやアンケート、メールフォーム、電子掲示板（BBS）などウェブ上には様々な CGIプログラムがあります。

HTML4.01 strict, XHTML1.0 strict, XHTML1.1 ではインライン要素やテキストを form要素の直下に置くことはできません。必ず p要素や div要素などのブロックレベル要素（form要素自体を除く）を内容にしなければなりません。strict 以外では直接インライン要素やテキストも内包できます。視覚環境の UA では表示域の左右いっぱいまでの範囲を占め、前後に改行を置き、上下に1行分の余白をあけた表示になります。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
要素型
ブロックレベル要素
開始タグ
必須
終了タグ
必須
非推奨
-
内容モデル

accept属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
form
必須
-
非推奨
-
属性値
MIME

input要素の type属性に "file" が指定されている場合、ウェブサーバが受け取ることのできる MIMEを限定するように UA に働きかけます。たとえば、CGIプログラムで画像ファイルのみをアップロードできるように取り扱いたい場合は、次のように記述します。

<form action="upload.cgi" method="post"
accept="image/gif,image/jpeg,image/png">
......
<input name="imgfile" type="file">

これは、"image/gif", "image/jpeg", "image/png" の MIMEのファイルを受け入れ、それ以外のファイルがアップロードに指定された場合に、警告用のダイアログを出すように UA に働きかけることが期待されます。しかし、現在 accept属性に対応している UA はありません。HTML5においては、 accept属性は廃止されました。

accept-charset属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
form
必須
-
非推奨
-
属性値
文字コード

データの送信先が受け入れるデータの符号化（エンコード）に用いる文字コードを指定します。複数指定することも可能で、半角スペース、またはカンマ（,）で区切って指定します（accept-charset="euc-jp utf-8"）。Internet Explorer 6/7/8は accept-charset属性に対応していません(IE9より対応)。

action属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
form
必須
必須属性
非推奨
-
属性値
URI

入力されたデータの送信先を指定します。送信先には主に CGIプログラムの URI が用いられています。なお、「action="mailto:xxx@xxx.xxx"」の記述を用いれば、指定のメールアドレスにデータを直接送信することもできまずが、HTTP（ウェブサーバと UA がデータを送受信する際に使われている通信手順）を用いない場合のデータ送信について、仕様は undefined と定義しているため、UA に依存するため対応していない場合もあります。このためフォームの練習程度に用いるのは良いでしょうが、実用的ではないためデータをメールで受け取りたい場合は、CGIプログラムを用いたメールフォームを用意すようにしましょう。

enctype属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
form
必須
-
非推奨
-
属性値
  • application/x-www-form-urlencoded
  • multipart/form-data

method属性に "post" が指定されている場合に送信するデータの MIMEを指定します。フォームに入力されたデータを送出する際に、これをウェブサーバが正しく解釈できるようにするためのデータ形式の設定です。enctype属性の指定がない場合は、"application/x-www-form-urlencoded" が初期値です。CGIプログラムでファイルのアップロードを可能にする場合は、必ず "multipart/form-data" を設定する必要があります。

application/x-www-form-urlencoded
  • パーセンテージ（%）と英数字で構成される URLエンコード形式（URI に用いられる文字列）で送信
  • 日本語などの2バイトフォントやASCII の文字コードに含まれないデータは16進数にエンコード（変換）する
  • enctype属性の指定がない場合は "application/x-www-form-urlencoded" が初期値となる
multipart/form-data
  • マルチパートデータ（添付ファイル）として送信
  • 符号化方式もセットに送信されるので、文字化けを防ぐ方法としても有用
  • ファイルや日本語などの2バイトフォント、バイナリデータを含むフォームの送信時に指定する
  • input要素の type属性 に "file" が指定されている場合に、ファイルのアップロードを可能にする
text/plain
  • 単純テキストファイル形式で送信
  • action属性に "mailto:" の記述でメールアドレスを指定した場合などに使う
  • ただし、HTTP を使わないものは仕様に定義されていないため、動作はユーザの環境（UA やメールソフト）に依存します

method属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
form
必須
-
非推奨
-
属性値
  • get
  • post

データを送信する際の HTTP（ウェブサーバと UA がデータを送受信する際に使われている通信手順）のリクエストに使うメソッド（方法）を指定します。method属性にしていできる値には次の2種類があります。

get
action属性で指定された URI にデータが付加されて送信（初期値）
post
データをそのまま送信（送信するデータ量が大きい場合に使われる）

"get" は送信するデータ量が小さい場合に、"post" は送信するデータ量が大きい場合とで使い分けると良いでしょう。

name属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(T,F)
指定要素
form
必須
-
非推奨
  • XHTML1.0 非推奨
  • XHTML1.0 strict 廃止
  • XHTML1.1 廃止
属性値
文字列

フォームに名前を付け、スクリプト（JavaScript など）から参照できるようにします。name属性の値は半角アルファベットの大文字・小文字が区別されません（case-insensitive）。XHTML1.0 strict と XHTML1.1 では name属性は廃止されたため、代わりに id属性 を使わなければいけません。それ以外のバージョンでは id属性の値を参照できない UA の後方互換のために name属性と id属性の両方に同じ値を設定することが認められています。

target属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
必須
-
非推奨
  • 非推奨
  • HTML4.01 strict 廃止
  • XHTML1.0 strict 廃止
  • XHTML1.1 廃止
属性値
  • _blank
  • _self
  • _parent
  • _top
  • 任意の名称

データの送信後にその応答を表示するページの表示方法を指定します。値には4つのキーワードと任意のフレーム名（frame要素に指定された name属性の値）を指定することができます。

_blank
データの送信後に名前のない新しいウインドウに表示
_self
データの送信後に同一（現在の）ウインドウに表示
_top
フレーム内からデータを送信した場合、フレームを解除し最上位ウインドウ全体に表示
_parent
フレーム内からデータを送信した場合、フレーム設定文書（多くの場合、フレームを解除しウインドウ全体）に表示
任意のフレーム名
データ送信後に指定の名称をもつフレームに表示
指定の名称がない場合は、名前のない新しいウインドウに表示

HTML4.01 Strict, XHTML1.0 Strict, XHTML1.1 では target属性は廃止されたため指定できません。

その他の属性

共通属性
イベント属性