<form> フォームを作成する

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

<form>タグの説明

<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
フォームが存在する文書と送信先のリソースとの関係を表します。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

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

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

HTML
<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>
表示確認

<form>に関連するHTMLタグ

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