cman.jpWEBページ作成
広告
<legend> 「入力部品グループにラベルを付ける」[読み方：レジェンド]
<legend>タグは、入力部品をグループ化<fieldset>内に指定することでグループ化外枠（線）にラベル（グループの見出し）を付ける事が出来ます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<legend> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| 無 | <fieldset>の最初の子要素 | フレージングコンテンツ ヘディングコンテンツと混在可能 | 不可 |
<legend>の属性
【構文】
<legend>～入力部品グループにラベルを付ける～</legend>
| 属性 | 意味 | 値のサンプルなど | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| align="位置" | 表題（タイトル）を表示する位置 ※HTML5で廃止。スタイルシートで指定。 |
| ||||||||||
| 廃止された属性 |
|
|||||||||||
| グローバル属性 |
| |
| イベント属性 |
| |
<legend>のサンプル
<fieldset>
<legend>ご登録内容を入力してください</legend>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
<legend>ご登録内容を入力してください</legend>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
<legend>のスタイルシートサンプル
<head>
<style type="text/css">
<!--
#css-s1 fieldset{
padding: 15px;
background-color: #ffffcc;
border: solid 1px #0000ff;
line-height: 2.5;
}
#css-s1 legend{
color: #0000ff;
}
-->
</style>
<div id="css-s1">
<fieldset>
<legend>ご登録内容を入力してください</legend>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
</div>
<style type="text/css">
<!--
#css-s1 fieldset{
padding: 15px;
background-color: #ffffcc;
border: solid 1px #0000ff;
line-height: 2.5;
}
#css-s1 legend{
color: #0000ff;
}
-->
</style>
<div id="css-s1">
<fieldset>
<legend>ご登録内容を入力してください</legend>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
</div>
留意事項
- グループ化の枠線などはブラウザによって見え方が異なります。
- align属性はHTML5で廃止されました。スタイルシートで指定してください。
| 関連するHTMLタグ | |
|---|---|
| fieldset | フォーム部品のグループ化 |
広告