このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

“form”要素:入力フォーム

記事May 11th,2016
July 15th, 2020
入力フォームを表す要素
要素一覧へ戻るABC順一覧へ
要素一覧へ戻るABC順一覧へ
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。
＃

要素について

カテゴリー フロー・コンテンツ、パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フロー・コンテンツ(ただし、“form”要素を子孫要素に持つことはできない)
タグの省略 不可

“form”要素は入力フォームを表す要素です。

“form”要素はフォーム関連要素を通して操作可能なハイパーリンクを表します。リンク先は“action”属性や“input”要素と“button”要素の“formaction”属性によって表されるフォームの入力値の送信先です。

ユーザーは“input”要素や“select”要素、“textarea”要素による入力欄で入力値を編集してサーバーに送信することができます。

フォーム関連要素は“form”要素の中に配置するか、“form”属性で“form”要素と関連づけることができます。

サンプルコード

<form method="post" action="sample-formtag1.php" target="_blank">
<fieldset>
<legend>好きな果物</legend>
<p>
<label><input type="checkbox" name="fruit[]" value="甘蕉">甘蕉</label>
<label><input type="checkbox" name="fruit[]" value="林檎">林檎</label>
<label><input type="checkbox" name="fruit[]" value="甜瓜">甜瓜</label>
<label><input type="checkbox" name="fruit[]" value="苺">苺</label>
<label><input type="checkbox" name="fruit[]" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>一番好きな果物</legend>
<p>
<label><input type="radio" name="no1fruit" value="甘蕉">甘蕉</label>
<label><input type="radio" name="no1fruit" value="林檎">林檎</label>
<label><input type="radio" name="no1fruit" value="甜瓜">甜瓜</label>
<label><input type="radio" name="no1fruit" value="苺">苺</label>
<label><input type="radio" name="no1fruit" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>好きな野菜</legend>
<p>
<label><input type="checkbox" name="vege[]" value="南瓜">南瓜</label>
<label><input type="checkbox" name="vege[]" value="甘藍">甘藍</label>
<label><input type="checkbox" name="vege[]" value="甘藷">甘藷</label>
<label><input type="checkbox" name="vege[]" value="西瓜">西瓜</label>
<label><input type="checkbox" name="vege[]" value="茄子">茄子</label>
</p>
</fieldset>
<fieldset>
<legend>一番好きな野菜</legend>
<p>
<label><input type="radio" name="no1vege" value="南瓜">南瓜</label>
<label><input type="radio" name="no1vege" value="甘藍">甘藍</label>
<label><input type="radio" name="no1vege" value="甘藷">甘藷</label>
<label><input type="radio" name="no1vege" value="西瓜">西瓜</label>
<label><input type="radio" name="no1vege" value="茄子">茄子</label>
</p>
</fieldset>
<fieldset>
<legend>あなたの情報</legend>
<p><label>居住地域：<input type="text" name="area"></label></p>
<p><label>年齢：<input type="number" name="age"></label></p>
<p><label>好きな色：<input type="color" name="color"></label></p>
<p><label>好きな時間：<input type="time" name="time"></label></p>
<p>
<label>好きな寿司ネタ：
<select name="sushi">
<option value="鮪">鮪</option>>
<option value="鰹">鰹</option>
<option value="鮭">鮭</option>
</select>
</label>
</p>
<p>
<label>感想：
<textarea type="text" name="comments" rows="5" cols="30"></textarea>
</label>
</p>
</fieldset>
<p><input type="submit" value="送信する"></p>
</form>
好きな果物

一番好きな果物

好きな野菜

一番好きな野菜

あなたの情報

＊送信すると入力内容が表示されます。
＃

属性と値

属性 値
属性 説明 値 説明
必須属性
なし
任意属性
グローバル属性
accept-charset="" フォームの送信時の文字エンコーディング utf-8 UTF-8
action="" フォームに入力されたデータの送信先 URL フォームに入力されたデータの送信先のURL
autocomplete=""HTML5で追加 ブラウザーによるオートコンプリートの可否 on オートコンプリートを行う
off オートコンプリートを行わない
enctype="" フォームが送信するデータの形式 application/x-www-form-urlencoded 入力されたデータをURLエンコードして送信
multipart/form-data 入力されたデータをマルチパートデータとして送信
text/plainHTML5で追加 入力されたデータをプレーンテキストとして送信
method="" フォームを送信時のHTTPメソッド get 入力されたデータを“action”属性で指定したURLにクエリ文字列として付加して送信
post 入力されたデータをHTTPリクエストの本文として送信
dialogHTML5.2で追加 フォームの送信時に“form”要素が含まれる“dialog”要素を閉じる
name="" フォームの名前 文字列 フォームの名前
novalidate=""HTML5で追加 フォームの送信時に入力内容の妥当性をチェックしない novalidate フォームの送信時に入力内容の妥当性をチェックしない
target="" フォームの送信時の応答画面の表示方法 _blank 新しいブラウジング・コンテキストに表示
_self 現在のブラウジング・コンテキストに表示
_parent 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示
_top 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示
ブラウジング・コンテキスト名 任意のブラウジング・コンテキストに表示
rel=""HTML Living Standardで定義 現在の文書から見たリンク先との関係 リンクタイプ 現在の文書から見たリンク先との関係
過去に定義されていた属性
属性 値
属性 説明 値 説明
accept=""注意 フォームが送信できるファイル形式 MIMEタイプ フォームが送信できるファイル形式
onsubmit="" フォームを送信した時に実行されるスクリプト スクリプト フォームを送信した時に実行されるスクリプト
onreset="" フォームをリセットした時に実行されるスクリプト スクリプト フォームをリセットした時に実行されるスクリプト
＃

フォームバリデーション

“フォームバリデーション”とは？

“フォームバリデーション(Form validation)”はフォームで送信される内容の妥当性をチェックする機能です。

HTML4まではフォームの入力内容のチェックはスクリプトやフォームの送信先のプログラムでしか行うことができませんでしたが、HTML5ではブラウザの機能として利用することができるようになりました。

ユーザーによる入力内容が決められた書式を満たしているかや、入力必須の項目が入力されているかを実際にフォームの入力内容を送信先のプログラムへ送る前に確認することができます。入力内容がフォームバリデーションを通らない場合にはブラウザがフォームの送信をブロックし、エラーメッセージを表示します。

ブラウザによるエラーメッセージ

他の手段で入力内容の妥当性をチェックする場合などにフォームバリデーションを無効化したい場合は“form”要素に“novalidate”属性を指定するかフォームの送信ボタンとなる要素に“formnovalidate”属性を指定します。

入力値の書式に制約がある要素

以下の要素は入力される値の書式が正しいかが検証され、書式が不正な場合はフォームバリデーションによってフォームが送信できなくなります。

要素 許可される入力値
要素 “type”属性の値
<input> url 妥当な形式のURL
email 妥当な形式のメールアドレス
date 機械可読な形式の日付(“YYYY-MM-DD”)
month 機械可読な形式の年と月(“YYYY-MM”)
week 機械可読な形式の年と週番号(“yyyy-Www”)
time 機械可読な形式の時刻(“hh:mm”もしくはhh:mm:ss”)
datetime-local 機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
number 数値
range 数値
color 7文字の16進数カラーコード(“#rrggbb”)

入力値に制約を加える属性

以下の属性は入力値に制約を加え、その制約を満たさない場合はフォームバリデーションによってフォームが送信できなくなります。

要素 制約する内容
要素 属性
<input> max="" 入力可能な値の最大値
maxlength="" 入力可能な最大の文字数
min="" 入力可能な値の最小値
minlength="" 入力可能な最小の文字数
pattern="" 入力可能な入力値の書式
step="" 入力可能な数値の間隔
required="" 入力必須
<select> required="" 入力必須
<textarea> maxlength="" 入力可能な最小の文字数
minlength="" 入力可能な最大の文字数
required="" 入力必須

以下の属性が指定された入力欄はフォームバリデーションの対象外になります。

要素 説明
要素 属性
<input> disabled="" 入力欄を無効化(値を送信しない)
readonly="" 入力値を編集できなくする
<select> disabled="" 入力欄を無効化(値を送信しない)
<textarea> disabled="" 入力欄を無効化(値を送信しない)
readonly="" 入力値を編集できなくする
＃

仕様書

“form”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<form>
定義あり
定義あり
定義あり
定義あり
定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
accept-charset=""
定義あり
定義あり
定義あり
定義あり
定義あり
action=""
定義あり
定義あり
定義あり
定義あり
定義あり
autocomplete=""
定義なし
定義あり
定義あり
定義あり
定義あり
enctype=""
定義あり
定義あり
定義あり
定義あり
定義あり
method=""
定義あり
定義あり
定義あり
定義あり
定義あり
name=""
定義あり
定義あり
定義あり
定義あり
定義あり
novalidate=""
定義なし
定義あり
定義あり
定義あり
定義あり
target=""
定義あり
定義あり
定義あり
定義あり
定義あり
rel=""
定義なし
定義なし
定義なし
定義なし
定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
accept=""
定義あり
削除
削除
削除
削除
onsubmit=""
定義あり
グローバル属性
グローバル属性
グローバル属性
グローバル属性
onreset=""
定義あり
グローバル属性
グローバル属性
グローバル属性
グローバル属性
DOMインターフェース
[Exposed=Window]
LegacyOverrideBuiltIns,
LegacyUnenumerableNamedProperties]
interface HTMLFormElement : HTMLElement {
[HTMLConstructor] constructor();

[CEReactions] attribute DOMString acceptCharset;
[CEReactions] attribute USVString action;
[CEReactions] attribute DOMString autocomplete;
[CEReactions] attribute DOMString enctype;
[CEReactions] attribute DOMString encoding;
[CEReactions] attribute DOMString method;
[CEReactions] attribute DOMString name;
[CEReactions] attribute boolean noValidate;
[CEReactions] attribute DOMString target;
[CEReactions] attribute DOMString rel;
[SameObject, PutForwards=value] readonly attribute DOMTokenList relList;

[SameObject] readonly attribute HTMLFormControlsCollection elements;
readonly attribute unsigned long length;
getter Element (unsigned long index);
getter (RadioNodeList or Element) (DOMString name);

undefined submit();
undefined requestSubmit(optional HTMLElement? submitter = null);
[CEReactions] undefined reset();
boolean checkValidity();
boolean reportValidity();
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

form {
display: block;
unicode-bidi: isolate;
}

:is(table,thead,tbody,tfoot,tr) > form {
display: none !important;
}

/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
form {
unicode-bidi: bidi-override;
}
要素一覧へ戻るABC順一覧へ
要素一覧へ戻るABC順一覧へ
検索
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク