<legend>タグの解説
<legend>は、<fieldset>でグループ化された入力項目にキャプションを与える祭に使用します。この要素は、親要素である<fieldset>の開始タグの直後に配置しなければなりません。
「legend」は一般的に「伝説」と翻訳されますが、ここでは「凡例」や「銘」の意味を表します。
<legend>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられませんが、ブラウザ側の既定のスタイルシートに従って独自の配置がなされます。
<fieldset>の直後にひとつだけ配置できます。この要素自体を入れ子にすることはできません。
<legend>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<legend>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<legend>は必ず<fieldset>の子要素として開始タグの直後に配置します。
<fieldset>
<legend>Caption</legend>
<input type="text" value="text">
</fieldset>
<legend>の表示位置は、<fieldset>要素のボックスの境界線の上になります。CSSの言葉で言えばblock-startの位置に重なります。装飾する場合は双方のプロパティを調整して下さい。
fieldset {
border: 3px double #666;
}
fieldset legend {
padding-inline: 1rem;
padding-block: 0.25rem;
background-color: #333;
color: #fff;
}
複数のグループに分けて入力項目を整理する
フォームの入力項目が多くなってきたら、扱う情報ごとにグループを分けて整理しましょう。グループに見出しをつけてCSSで装飾を行えば、利用者が直感的に操作できるインターフェイスを提供できます。
<form action="#####" method="post" class="sample-block">
<fieldset>
<legend>利用者様情報</legend>
<p>
<span>お名前：</span>
<label><input type="text" name="name" size="30"></label>
</p>
<p>
<span>性別：</span>
<label><input type="radio" name="gender" value="m">男</label>
<label><input type="radio" name="gender" value="w">女</label>
</p>
<p>
<span>端末：</span>
<label><input type="checkbox" name="device" value="pc">PC</label>
<label><input type="checkbox" name="device" value="sp">SP</label>
<label><input type="checkbox" name="device" value="tb">Tab</label>
</p>
</fieldset>
<fieldset>
<legend>アンケート</legend>
<p>
<span>採点：</span>
<label>
<select name="point">
<option value="5" label="非常に良い">
<option value="4" label="良い">
<option value="3" label="普通">
<option value="2" label="良くない">
<option value="1" label="非常に良くない">
</select>
</label>
</p>
<p>
<span>感想：</span>
<label>
<textarea name="comment" rows="4" cols="40">感想があれば書いて下さい。</textarea>
</label>
</p>
</fieldset>
<button type="button">送信</button>
</form>
.sample-block {
padding-block-end: 1rem;
border: 1px solid #999;
background-color: #ccc;
}
.sample-block fieldset {
padding: 0;
margin: 0;
border: none;
}
.sample-block legend {
inline-size: 100%;
padding: 0.5rem;
background-color: #039;
color: #fff;
}
.sample-block p {
display: flex;
align-item: center;
gap: 0.5rem;
padding: 0.5rem;
margin: 0;
background-color: #fff;
}
.sample-block p span {
flex-basis: 5rem;
}
.sample-block button {
display: block;
inline-size: 80%;
padding: 0.5rem;
margin: 1rem auto 0;
}