<form>：入力・送信用のフォームを作成する要素・HTMLタグの解説

<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

フォームが存在する文書と送信先のリソースとの関係を表します。注釈を表す値にはexternal、nofollow、opener、noopener、noreferrerがあります。リンク種別を表す値にはhelp、prev、next、search、licenseがあります。これらの値を空白区切りのリストで指定します。

グローバル属性

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

イベントハンドラ

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

<form>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。入力・送信フォームの中には様々なデータフィールドやパーツを埋め込むことができます。最終的にクライアントからサーバーへデータを送る方法と場所を<form>で指定します。

<form action="URL" method="type">
	<input type="value" name="value">
	<button>送信<button>
</form>

フォームに色々なパーツを配置した時の参考例です。各パーツの装飾はブラウザの既定値で表示されます。これをサイトのデザインに合わせたい場合はスタイルシートを使用します。

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