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

取り扱い 標準仕様
カテゴリー フロー・コンテンツ
パルパブル・コンテンツ
親にできる要素 フロー・コンテンツを受け入れる要素
子にできる要素 フロー・コンテンツ。ただし、<form>を除く
対応ブラウザ caniuseで確認

<form>タグの解説

<form>は、ウェブサーバーに情報を送信するための入力フォームを作成します。子要素に色々なパーツを埋め込む事で、ユーザーが操作可能な機能を提供します。

この機能を使いこなすには、クライアントのリクエストとサーバーのレスポンスを理解する必要があります。各パーツの詳細は関連する要素のページを参照して下さい。

<form>タグの特徴

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

<form>要素に指定できる属性

action
フォームから送られるデータを処理するプログラムのURLを指定します。この値は、<button><input type="submit">などのformaction属性で上書きできます。また、method属性にdialogの値が設定された場合は無視されます。
method
ブラウザがフォーム送信時に使用するHTTPメソッドを指定します。有効な値は三種類で、getpostdialogとなります。この値は、<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
ブラウザの入力補完を受け付けるかどうかの指定を行います。この値はonoffの二種類です。これは必ずしも作動するわけではなく、ブラウザの仕様に依存します。
name
フォームに名称を与えます。この値は他のフォームと競合してはいけません。
rel
フォームが存在する文書と送信先のリソースとの関係を表します。注釈を表す値にはexternalnofollowopenernoopenernoreferrerがあります。リンク種別を表す値にはhelpprevnextsearchlicenseがあります。これらの値を空白区切りのリストで指定します。
グローバル属性
全ての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>

<form>に関連するHTMLタグ

入力・送信フォームに関連する要素
<form> 入力・送信フォームを作成する
<fieldset> フォームの入力項目をグループ化する
<legend> 入力項目のグループにキャプションを与える
<input> フォームを構成する部品を作成する
<label> 入力項目にキャプションを与えて関連付ける
<textarea> 複数行に渡るテキスト編集項目を作成する
<button> 操作可能なボタンを設置する
<select> 選択式メニューの枠を作成する
<option> 選択式メニューの項目を作成する
<optgroup> 選択式メニューの項目をグループ化する
<datalist> フォームの入力欄に入力候補となる選択肢を提供する