<legend> 入力項目のグループにキャプションを与える
取り扱い | 現行の標準 |
カテゴリ |
なし |
親にできる要素 | <fieldset> |
子にできる要素 | フレージング・コンテンツと見出し |
対応ブラウザ | caniuseで確認 |
<legend>タグの説明
<legend>
は、<fieldset>
でグループ化された入力項目にキャプションを与える祭に使用します。この要素は、親要素である<fieldset>
の開始タグの直後に配置しなければなりません。
「legend」は一般的に「伝説」と翻訳されますが、ここでは「凡例」や「銘」の意味を表します。
<legend>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられませんが、ブラウザ側の既定のスタイルシートに従って独自の配置がなされます。
<fieldset>
の直後に一つだけ配置できます。この要素自体を入れ子にすることはできません。
<legend>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<legend>の使い方とサンプル
このタグを使ったマークアップのサンプルです。
HTML
<form action="#####" method="post">
<fieldset>
<legend>利用者様情報</legend>
お名前:
<input type="text" name="name" size="40"><br>
性 別:
<input type="radio" name="seibetsu" value="m">男
<input type="radio" name="seibetsu" value="w">女<br>
端 末:
<input type="checkbox" name="tanmatsu" value="pc">PC
<input type="checkbox" name="tanmatsu" value="i">Docomo
<input type="checkbox" name="tanmatsu" value="e">au
<input type="checkbox" name="tanmatsu" value="s">SoftBank<br>
</fieldset>
<fieldset>
<legend>アンケート</legend>
採 点:
<select name="point">
<option value="1">非常に良い</option>
<option value="2">良い</option>
<option value="3">普通</option>
<option value="4">良くない</option>
<option value="5">非常に良くない</option>
</select><br>
感 想:<br>
<textarea name="kanso" rows="4" cols="40">感想があれば書いて下さい。</textarea>
</fieldset>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>
表示確認
<legend>に関連するHTMLタグ
入力・送信フォームに関連する要素 | |
---|---|
<form> | フォームを作成する |
<fieldset> | フォームの入力項目をグループ化する |
<legend> | 入力項目のグループにキャプションを与える |
<input> | フォームを構成する部品を作成する |
<label> | 入力項目にキャプションを与えて関連付ける |
<textarea> | 複数行に渡るテキスト編集項目を作成する |
<button> | ボタンを設置する |
<select> | セレクトボックスを作成する |
<option> | セレクトボックスの選択肢を作成する |
<optgroup> | セレクトボックスの選択肢をグループ化する |
<datalist> | フォームの入力欄に入力候補となる選択肢を提供する |