＜legend要素＞ - フォームコントロールのグループのキャプション
公開日:
legend要素は、グループ化したフォームコントロールにキャプションを付けるための要素です。
概要
- 名前
- legend
- カテゴリー
- なし。
- 配置できる場所
- fieldset要素の子要素として配置すること。
- コンテンツモデル
- Phrasing content。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLLegendElement
- デフォルトのスタイル
legend { display: block; -webkit-padding-start: 2px; -webkit-padding-end: 2px; border-width: initial; border-style: none; border-color: initial; border-image: initial; }- 仕様書
- https://html.spec.whatwg.org/multipage/forms.html#the-legend-element
属性
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
legend要素は、fieldset要素の先頭に配置しなければいけません。
HTML
<form action="./form.php">
<p>名前: <input type="text" name="name"></p>
<!-- 1つ目のグループ -->
<fieldset>
<!-- 1つ目のグループのキャプション -->
<legend>健康に関わる質問</legend>
<p>年齢: <input type="number" name="age"></p>
<p>身長: <input type="number" name="height"></p>
<p>1日の運動時間: <input type="number" name="sport"></p>
</fieldset>
<!-- 2つ目のグループ -->
<fieldset>
<!-- 2つ目のグループのキャプション -->
<legend>どうでもいい質問</legend>
<p>趣味: <input type="text" name="hobby"></p>
<p>質問など: <textarea name="extra"></textarea></p>
</fieldset>
<button>内容を送信</button>
</form>サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】＜legend要素＞ - フォームコントロールのグループのキャプション</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/legend/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>legend要素は、グループ化したフォームコントロールにキャプションを付けるための要素です。何の分類か表示することで、ユーザーが入力しやすくなるはずです。</p>
<h2>legend要素あり</h2>
<form action="./form.php">
<p>名前: <input name="name" value="あらゆ"></p>
<fieldset>
<legend>SNSアカウントについて</legend>
<p>
Twitterアカウント:
<label><input type="radio" name="twitter" value="have" checked>持ってる</label>
<label><input type="radio" name="twitter" value="not_have">持ってない</label>
</p>
<p>
Facebookアカウント:
<label><input type="radio" name="facebook" value="have" checked>持ってる</label>
<label><input type="radio" name="facebook" value="not_have">持ってない</label>
</p>
<p>
はてなアカウント:
<label><input type="radio" name="hatena" value="have" checked>持ってる</label>
<label><input type="radio" name="hatena" value="not_have">持ってない</label>
</p>
</fieldset>
<button>内容を送信</button>
</form>
<h2>legend要素なし</h2>
<form action="./form.php">
<p>名前: <input name="name" value="あらゆ"></p>
<fieldset>
<p>
Twitterアカウント:
<label><input type="radio" name="twitter" value="have" checked>持ってる</label>
<label><input type="radio" name="twitter" value="not_have">持ってない</label>
</p>
<p>
Facebookアカウント:
<label><input type="radio" name="facebook" value="have" checked>持ってる</label>
<label><input type="radio" name="facebook" value="not_have">持ってない</label>
</p>
<p>
はてなアカウント:
<label><input type="radio" name="hatena" value="have" checked>持ってる</label>
<label><input type="radio" name="hatena" value="not_have">持ってない</label>
</p>
</fieldset>
<button>内容を送信</button>
</form>
</body>
</html>