<fieldset> フォームの入力項目をグループ化する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ パルパブル・コンテンツ |
親にできる要素 | フロー・コンテンツを受け入れる要素 |
子にできる要素 | <legend> と、それに続くフロー・コンテンツ |
対応ブラウザ | caniuseで確認 |
<fieldset>タグの説明
<fieldset>
は、フォームの入力項目をグループ化する際に使用します。グループ化した項目は見出しを設定したり、Tabでグループ間を移動できるようになります。
グループ化した項目の見出しは、<fieldset>
の直後に<legend>
を設置し、その中に記述します。
<fieldset>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果として、グループ化した項目が枠で囲われます(ブラウザによる)。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<fieldset>に指定できる主な属性
<fieldset>の使い方とサンプル
このタグを使ったマークアップのサンプルです。
HTML
<form action="#####" method="post">
<fieldset>
<legend>利用者様情報</legend>
お名前:
<input type="text" name="name" size="30"><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
</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>
表示確認