May 11th,2016
＃
要素について
| カテゴリー | なし |
| 利用場所 | “fieldset”要素の最初の子要素として |
| 内容 | フレージング・コンテンツと任意で混在するヘッディング・コンテンツ |
| タグの省略 | 不可 |
“legend”要素は親要素の“fieldset”要素でグループ化したフォームの内容のキャプションを表す要素です。
“legend”要素は“fieldset”要素の子要素として一つだけ配置することができます。
サンプルコード
<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>
多くのブラウザでは“legend”要素の内容は“fieldset”要素でグループ化したフォーム内容の左上に表示されます。
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| なし | |||
| 任意属性 | |||
| グローバル属性 | |||
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
align="" |
表示位置 | top | グループの上部 |
| bottom | グループの下部 | ||
| left | グループの左側 | ||
| right | グループの右側 | ||
| accesskey="" | 要素にアクセスキーを割り当てる | 文字 | ユニコード1文字によるアクセスキー |
＃
仕様書
“legend”要素はHTML4.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
DOMインターフェース
[Exposed=Window]
interface HTMLLegendElement : HTMLElement {
[HTMLConstructor] constructor();
readonly attribute HTMLFormElement? form;
// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
legend {
display: block;
unicode-bidi: isolate;
padding-inline-start: 2px;
padding-inline-end: 2px;
}
legend[align=left i] {
justify-self: left;
}
legend[align=center i] {
justify-self: center;
}
legend[align=right i] {
justify-self: right;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
legend {
unicode-bidi: bidi-override;
}
