<form> 入力・送信用のフォームを作成する

<form>タグの説明

<form>は、ウェブサーバーに情報を送信するための入力フォームを作成する際に使用します。この機能を使いこなすには、クライアントのリクエストとサーバーのレスポンスを理解する必要があります。

<form>は、子要素に色々なパーツを埋め込む事で、ユーザーが操作可能な機能を提供します。各パーツの詳細は関連するタグのページを参照して下さい。

<form>タグの特徴

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<form>に指定できる主な属性

action

フォームから送られるデータを処理するプログラムのURLを指定します。この値は、<button>や<input type="submit">などのformaction属性で上書きできます。また、method属性にdialogの値が設定された場合は無視されます。

method

ブラウザがフォーム送信時に使用するHTTPメソッドを指定します。有効な値は三種類で、get、post、dialogとなります。この値は、<button>や<input type="submit">などのformmethod属性で上書きできます。

target

フォームを送信した後に受け取ったレスポンスを表示する位置を指定します。初期値は_selfで、送信前と同じウィンドウやタブで応答します。新しいウィンドウやタブで開きたい場合は_blank、フレームなどの親子関係がある環境で一つ上位に移動したい場合は_parent、最上位に表示させたい場合は_top"を与えます。

enctype

method属性の値がpostのとき、サーバーに送信するデータのMIMEタイプを指定します。この値は、<button>や<input type="submit">などのformenctype属性で上書きできます。

novalidate

フォームを送信するときに検証しないことを指示します。この属性が書かれていない場合、<button>や<input type="submit">などのformnovalidate属性で上書きできます。

accept-charset

サーバーが受け付ける文字のエンコーディングを空白区切りで列挙します。

autocomplete

ブラウザの入力補完を受け付けるかどうかの指定を行います。この値はonかoffの二種類です。これは必ずしも作動するわけではなく、ブラウザの仕様に依存します。

name

フォームに名称を与えます。この値は他のフォームと競合してはいけません。

rel

フォームが存在する文書と送信先のリソースとの関係を表します。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<form>の使い方とサンプル

ウェブページに入力・送信フォームを設置する祭のマークアップのサンプルです。

<form action="#####" method="post">
	名前：
	<input type="text" name="name" size="30"><br>
	性別：
	<input type="radio" name="seibetsu" value="m">男
	<input type="radio" name="seibetsu" value="w">女<br>
	端末：
	<input type="checkbox" name="tanmatsu" value="pc">PC
	<input type="checkbox" name="tanmatsu" value="i">Docomo
	<input type="checkbox" name="tanmatsu" value="e">au
	<input type="checkbox" name="tanmatsu" value="s">SoftBank<br>
	血液型：
	<select name="blood">
		<option value="A">A型</option>
		<option value="B">B型</option>
		<option value="O">O型</option>
		<option value="AB">AB型</option>
	</select><br>
	感想：<br>
	<textarea name="kanso" rows="4" cols="40">感想があれば書いて下さい。</textarea>
	<br>
	<input type="submit" value="送信">
	<input type="reset" value="リセット">
</form>