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

fieldset”要素:フォームの内容のグループ化

記事May 11th,2016
Feb. 12th,2023
フォームの内容をグループ化する要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

fieldset”要素はフォームの内容をグループ化する要素です。

legend”要素を使用してグループにキャプションをつけることができます。

fieldset”要素は多くの場合form”要素の中に配置されますが、form”属性を指定することでform”要素の外に配置することもできます。

サンプルコード

<form method="post" action="sample-formtag2.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="text" name="area"></label></p>
<p><label>年齢:<input type="number" name="age"></label></p>
</fieldset>
<p><input type="submit" value="送信する"></p>
</form>
好きな果物

一番好きな果物

あなたの情報

居住地域:

年齢:

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

多くのブラウザでは“fieldset”要素の内容は境界線で囲まれて表示されます。

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
disabled=""HTML5で追加 グループ化したフォームの内容を無効化 disabled グループ化したフォームの内容を無効化
form=""HTML5で追加 関連付けるフォーム ID名 関連づけるform”要素id”属性の値
name=""HTML5で追加 グループの名前 文字列 グループの名前

仕様書

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

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<fieldset>
定義あり

定義あり

定義あり

定義あり

定義あり
DOMインターフェース
[Exposed=Window]
interface HTMLFieldSetElement : HTMLElement {
[HTMLConstructor] constructor();

[HTMLConstructor] constructor();

[CEReactions] attribute boolean disabled;
readonly attribute HTMLFormElement? form;
[CEReactions] attribute DOMString name;

readonly attribute DOMString type;

[SameObject] readonly attribute HTMLCollection elements;

readonly attribute boolean willValidate;
[SameObject] readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
boolean reportValidity();
undefined setCustomValidity(DOMString error);

// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

fieldset {
display: block;
margin-inline-start: 2px;
margin-inline-end: 2px;
border: groove 2px ThreeDFace;
padding-block-start: 0.35;
padding-inline-end: 0.75;
padding-block-end: 0.625em;
padding-inline-start: 0.75em;
min-inline-size: min-content;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク