<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>
表示確認
<fieldset>に関連するHTMLタグ
入力・送信フォームに関連する要素 | |
---|---|
<form> | フォームを作成する |
<fieldset> | フォームの入力項目をグループ化する |
<legend> | 入力項目のグループにキャプションを与える |
<input> | フォームを構成する部品を作成する |
<label> | 入力項目にキャプションを与えて関連付ける |
<textarea> | 複数行に渡るテキスト編集項目を作成する |
<button> | ボタンを設置する |
<select> | セレクトボックスを作成する |
<option> | セレクトボックスの選択肢を作成する |
<optgroup> | セレクトボックスの選択肢をグループ化する |
<datalist> | フォームの入力欄に入力候補となる選択肢を提供する |