<form>フォームを作成

<form>タグは、入力・送信フォームを作る際に利用し、関連する各要素の集まりを示します。 form要素内に<input>、<select>、<textarea>などのタグを配置する事で、1行のテキストボックス、チェックボックス、ラジオボタン、テキストボックスなど、webブラウザ上で文字の入力や選択などの環境を用意するためのインターフェースを作成することができます。

またフォームに入力されたデータは、送信ボタンを押す事でサーバーにそのデータの値を送信できます。 action属性で、フォームに入力されたデータの送信先アドレスを指定し、method属性でフォームのデータを送信する際の送信方法(HTTPプロトコル)を指定します。

ただし送信されたデータを処理するためには、送信先に別途PHP・CGIプログラムなどを設置する必要があります。

HTML5での変更点

HTML5のform要素では、autocomplete属性、novalidate属性が追加され、accept属性が廃止されました。 またフォーム関連部品をform要素の外にも配置できるようになりました。

書式

  • <form 属性="値">~</form> ……… 入力・送信フォームを作成する

属性

accept-charset="" 文字のエンコーディングを指定(UTF-8、Shift_JIS、EUC-JPなど)
action="url" フォームデータの送信先アドレス
autocomplete="" オートコンプリート機能を有効にするかどうかを指定。「on」で有効、「off」で無効
enctype="" フォームデータのエンコーディング方法(送信データの形式)
  • application/x-www-form-urlencoded …… urlエンコード
  • multipart/form-data …… マルチパート
  • text/plain …… プレーンテキスト
method="" フォームデータ送信時のHTTPプロトコルを指定
  • get …… データをURL形式で送信
  • post …… データを本文として送信
name="" フォームの名前を指定
novalidate フォーム送信時に検証しないようにする
target="" フォーム送信後、結果の表示先を指定
  • _blank …… 新規ウィンドウ
  • _self …… 現在のウィンドウ
  • _parent …… 親ウィンドウ
  • _top …… フレームを解除しウィンドウ全体
  • ウィンドウ・フレーム名 …… 任意のウィンドウ

accept-charset属性

accept-charset属性では、送信されるデータの文字エンコーディングを指定できます。 通常フォームで入力した文字エンコーディングは、HTML文書の文字エンコーディングと同じですが、意図的に変更したい場合はaccept-charset属性で任意の文字エンコーディングに変更できます。

accept-charset属性には複数の値を指定することができ、日本語の文字エンコーディングの値では「UTF-8」「Shift_JIS」「EUC-JP」などがあります。

複数の値を指定したい場合は、半角スペースで区切って指定して下さい。 その場合、最初の文字エンコーディングが優先され、ブラウザがサポートしていない文字エンコーディングだった場合に次の文字エンコーディングが利用されます。

<form method="post" action="sample.cgi" accept-charset="UTF-8">
~
</form>

enctype属性で送信データの形式を指定

enctype属性では、送信するデータの形式を指定します。 この属性に指定できる値は決まっており、次の3種類となっています。

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

通常は「application/x-www-form-urlencoded」(初期値)を指定しますが、ファイルを添付するようなフォームの場合であれば「multipart/form-data」を指定します。 またプレイン・テキストのみならば「text/plain」を指定します。

method属性でHTTPメソッドを指定

method属性では、フォームの入力内容を送信するHTTPメソッド(送信方法)を指定します。

method属性には「get」(初期値)か「post」を指定することができ、getを指定するとaction属性で指定したurlの後に「?」で連結された状態で入力されたデータが送信されてきます。 postを指定するとurlに連結されることなく、データとして送信されてきます。 これは日本語で大量のデータが送信される時などに向いています。

なおform要素でのmethod属性とは別に、フォーム関連の要素でformmethod属性を指定することができますが、その場合formmethod属性が優先されます。

action属性でデータの送信先を指定

フォームで入力されたデータの送信先はaction属性で指定します。 フォームでは、ほとんどの場合action属性が必要となりますが、他のフォーム関連要素にformaction属性が指定されている場合は、formaction属性が優先されます。

<form action="sample.cgi">
~
</form>

データ内容のチェックを無効にするnovalidate属性

novalidate属性では、フォームのバリデーション(入力値の検証)をするかどうかを指定できます。

HTML5では、テキスト入力欄(input要素など)に「tel」や「url」「email」などの属性値を指定できるようになりました。 ですがemailなどの場合、"@"が必ず一つ必要で、"@"以降には"."が無ければemalと認められず、バリデーション機能が働いてデータが送信されません。

novalidate属性を指定すると、このようなバリデーション機能を無効にし、どのような入力内容であっても送信することができるようになります。

<form action="sample.cgi" method="get" novalidate>
~
</form>

autocomplete属性で自動入力を指定

autocomplete属性では、オートコンプリート(自動補完)機能を有効にするかどうか指定する事ができます。 例えばフォームに一度入力した内容をブラウザが記憶し、自動入力してくれる機能をオンにするオフにするか指定できます。

この機能はメールアドレスなどの入力の手間を省いてくれる面もありますが、ブラウザ側が自動入力してしまうと、セキュリティに問題が生じる場合もありますので、必要に応じて使用するようにしましょう。

また、この属性を有効にする場合は「on」、無効にする場合は「off」と指定します。

<form action="sample.cgi" method="get" autocomplete="off">
~
</form>

使用した時の例

<form action="/cgi-bin/sample.cgi" method="post">
  <p>名前:<input type="text" name="name"></p>
  <p><input type="submit" value="送信"></p>
</form>

ブラウザ上の表示例

名前:

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

形式 <form action="">~</form> カテゴリ フローコンテンツ, パルパブルコンテンツ
親要素 フローコンテンツが期待される場所 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~