HTML

この記事では、入力欄などで集めたユーザーの情報をひとまとめにし、指定した送信先へ届けるHTMLのform要素の役割と基本を説明します。

この記事でわかること

フォームが入力値を送信する流れ
actionとmethodの役割
label・nameを使った入力項目の設計

HyperText Markup Language form element.

form 要素

　form要素は、ユーザーからの情報を収集するための HTML要素であり、Webページ上でユーザーがデータを送信するための機能を提供します。具体的には、ユーザーが入力した情報を Webページからサーバーに送信することができます。

　form要素は以下の属性を持ちます。

action: フォームの送信先URLを指定します。この属性がない場合は、デフォルトの送信先URLが使用されます。
method: フォームの送信方法を指定します。一般的には、GET または POST を使用します。
name: フォームの名前を指定します。この属性は、JavaScriptでフォームを制御する場合に使用されます。
enctype: フォームのデータのエンコード方法を指定します。主にファイルアップロードの場合に使用されます。
target: フォームの送信結果を表示するフレームの名前またはタブの名前を指定します。

　form要素内には、以下のようなフォームコントロールが含まれます。

input 要素: テキスト入力、パスワード入力、ラジオボタン、チェックボックス、ファイル選択などのフォームコントロールを提供します。
select 要素: セレクトボックス（プルダウンメニュー）を作成します。
textarea 要素: 複数行のテキスト入力欄を作成します。
button 要素: ボタンを作成します。

　これらのフォームコントロールは、ユーザーからの入力を収集するために使用されます。input要素や select要素には、name属性を指定することで、そのフォームコントロールの値を識別することができます。また、input要素には、type属性を指定することで、テキスト入力やパスワード入力、ファイルアップロードなど、様々な種類の入力を提供することができます。

　form要素は、送信ボタンを含めることができます。送信ボタンをクリックすることで、フォームの入力値がサーバーに送信されます。また、JavaScriptを使用して、送信ボタンがクリックされた時にカスタムの処理を実行することもできます。

action 属性

　フォームが送信された時にデータを送信する先のURLを指定します。この属性が設定されていない場合は、フォームが現在のページに送信されます。action属性の値は、相対パスまたは絶対パスで指定することができます。

　ただし、もし送信ボタンを表す submitタイプの input要素や、submitタイプの button要素に formaction属性が指定されていたら、その formaction属性が優先されます。詳細については、button 要素をご覧ください。

　フォームの送信先のURLは、サーバー側でフォームデータを受け取り、処理するために使用されます。フォームデータは、GET または POST メソッドで送信されます。GETメソッドは、フォームデータをURLのクエリ文字列として送信します。POSTメソッドは、フォームデータをHTTPリクエストのボディに含めて送信します。一般的に、フォームデータには、ユーザーが入力した情報や、フォームの種類などが含まれます。

　以下は、action属性を使用した例です。

HTML source


<form action="submit.php" method="post">
	<label for="name">Name：</label>
	<input type="text" id="name" name="name"><br>
	<input type="submit" value="Submit">
</form>

CSS source


input[type="submit"] {
	display: inline-block;
	padding: 1ex 2ex;
	margin: 1ex;
	font-size: larger;
	box-shadow: 0.2ex 0.2ex 0.3ex;
}

　この例では、フォームが送信されたときに submit.php というファイルにデータが送信されます。フォームデータには、name という名前の入力欄に入力された値が含まれます。また、method属性に post が指定されているため、フォームデータはHTTPリクエストのボディに含めて送信されます。送信ボタンは <input type="submit"> を使用して作成されています。

accept-charset 属性

　通常は、フォームで送信されるデータは、ページの文字エンコーディングと同じになります。しかし、accept-charset属性に文字エンコード名を指定すると、フォームに入力されたデータが、指定の文字エンコーディングに変換されて、サーバーに送信されます。

accept-charset属性のマークアップ例


<form action="example.cgi" method="post" accept-charset="EUC-JP">
	<p><label>名前：<input type="text" name="name"></label></p>
	<p><input type="submit" value="送信"></p>
</form>

　この例では、accept-charset属性に EUC-JP が指定されていますので、入力データは EUC-JP に変換された上で、サーバーに送信されることになります。

　accept-charset属性には、文字エンコーディング名を複数指定することができます。その場合は、半角スペースで区切ります。

複数の文字エンコーディング名を指定したマークアップ例


<form action="example.cgi" method="post" accept-charset="Shift_JIS EUC-JP">
	<p><label>名前：<input type="text" name="name"></label></p>
	<p><input type="submit" value="送信"></p>
</form>

　この場合は、accept-charset属性に対応したブラウザであれば、指定されたエンコーディング名のうち、最初から順に見ていき、そのブラウザがサポートした文字エンコーディングがあれば、それが採用され、実際のエンコーディングに使われます。この例では、どのブラウザでも、Shift_JIS に変換されて、入力データがサーバに送信されます。

　2009年12月時点において、Firefox 3.6、Safari 4、Chrome 4、Opera 10 は accept-charset コンテンツ属性をサポートしていますが、Internet Explorer 8 はサポートしていません。

autocomplete 属性

　autocomplete属性は、テキスト入力フィールドなどで、オートコンプリート機能を有効にするか、無効にするかを定義できます。

　オートコンプリート機能とは、以前に入力したデータをブラウザが覚えておき、次回以降、同じフォームにアクセスしたら、過去に入力したデータの候補を表示して、それを選択するだけで、該当の入力フィールドに値をセットすることができるユーザーインタフェースをユーザーに提供するものです。

　この属性は列挙属性です。もし指定するなら、"on" または "off" のいずれかを指定します。"on" はオートコンプリート機能を有効に、"off" は無効にします。

　この属性のデフォルト値は "on" です。したがって、オートコンプリート機能を実装したブラウザでは、この属性を指定しなくても、オートコンプリートが有効になります。

オートコンプリート機能を無効にするマークアップ例


<form action="example.cgi" method="post" autocomplete="off">
	<p><label>ユーザー名：<input type="text" name="user" /></label></p>
	<p><input type="submit" value="送信" /></p>
</form>

　入力内容によっては、セキュリティー上の理由から、ブラウザに入力値を記憶させない方が良い場合もあります。その場合は、autocomplete属性に "off" を指定して、オートコンプリート機能を無効にします。

　もし、form要素の中にある input要素にも autocomplete属性を指定した場合、たとえ form要素に autocomplete属性が指定されていたとしても、その input要素の autocomplete属性が優先されます。

enctype 属性

　enctype属性は、フォーム・データをサーバーに送信する際に、どのような形式でデータをエンコードするのかを指定します。このコンテンツ属性は列挙属性で、次の 3つの値のいずれかでなければいけません。

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

　指定がなければ、application/x-www-form-urlencoded が適用されます。

　通常のフォームでは、この属性を明示的に指定する必要はありませんが、ファイルを添付するフォームでは、multipart/form-data を指定する必要があります。

　また、もし該当のフォームに関連付けられた送信ボタンを表す input要素や button要素に formenctype属性が指定されている場合は、そちらが優先されます。詳細については、button 要素をご覧ください。

method属性

　method属性は、フォーム・データをサーバーに送信する際の HTTPメソッドを指定します。この属性は列挙属性で、"GET"、"POST"、"PUT"、"DELETE" のいずれかをセットしなければいけません。もし、この属性が指定されていなければ、"GET" がデフォルトで適用されます。

　なお、もし該当のフォームに関連付けられた送信ボタンを表す input要素や button要素に formmethod属性が指定されている場合は、そちらが優先されます。詳細については、button 要素をご覧ください。

name 属性

　name属性は、form要素の名前を指定します。もし、このコンテンツ属性を指定するなら、必ず 1文字以上の名前を指定しなければいけません。また、ドキュメント内に別の form要素がある場合、それら form要素の中で、name属性の値が重複してはいけません。

novalidate 属性

　novalidate 属性は、該当のフォームに関連するコントロールの入力データのバリデートを行わないことを指定します。この属性は論理属性で、この属性が存在すれば、バリデートが無効になります。

　バリデートの詳細については、input要素をご覧ください。

novalidate属性のマークアップ例


<form action="example.cgi" method="post" novalidate="">
	<p><label>メールアドレス：<input type="email" name="email" /></label></p>
	<p><input type="submit" value="送信" /></p>
</form>

　この例にあるテキスト入力フィールドを表す input要素の type属性には "email" がセットされていますので、このタイプに対応したブラウザであれば、メールアドレスとして適切な文字列しか送信できません。しかし、form要素に novalidate属性がセットされているため、その入力制限は適用されず、どんな文字列でも送信可能となります。

2009年12月現在で、このコンテンツ属性をサポートしたブラウザはありません。

target 属性

　target属性は、フォーム送信後の結果を表示するブラウジング・コンテキスト名を指定します。

target属性のマークアップ例


<form action="example.cgi" method="post" target="_blank">
	<p><label>ユーザー名：<input type="text" name="user" /></label></p>
	<p><input type="submit" value="送信" /></p>
</form>

　この例では、form要素の target属性に "_blank" がセットされていますので、このフォームが送信されると、新たにブラウジング・コンテキストが用意され、結果画面がそこに表示されることになります。

　フォーム送信後のターゲットとなるブラウジング・コンテキストは、この他でも定義することができ、それぞれに優先順位があります。

　まず、該当のフォームに関連付けられた送信ボタンを表す input要素に formtarget属性が指定されている場合は、それが採用されます。その次に、form要素の target属性が指定されていれば、それが採用されます。その次に、head要素内の base要素の target属性があれば、それが採用されます。いずれにもターゲットが指定されていなければ、"_self" が指定されたのと同じ挙動となります。つまり、同じブラウジング・コンテキストに送信結果の画面が表示されることになります。

　このコンテンツ属性に指定可能な値は、a 要素の target コンテンツ属性と同じですので、詳細については、a 要素をご覧ください。

form 要素の概要

カテゴリー

フロー・コンテンツ

コンテンツ･モデル

フロー・コンテンツ。ただし、中に form要素を入れてはいけません。

利用可能な場所

フロー・コンテンツが期待される場所。

開始タグ

必須

終了タグ

必須

要素固有の属性

accept-charset: フォーム送信に使う文字エンコーディングを指定します。
action: フォーム送信先のアドレスを指定します。
autocomplete: オートコンプリートを有効にするかどうかを指定します。
enctype: フォーム送信の MIMEタイプを指定します。
method: フォーム送信に使う HTTPメソッドを指定します。
name: フォームの名前を指定します。
novalidate: フォーム送信時に入力値のバリデートを行わないようにします。
target: フォームのターゲットを表すブラウジング・コンテキスト名やキーワードを指定します。

標準的なスタイル


form {
	display: block;
}