複数のフォーム部品をまとめる
フォームの部品であるinput要素をまとめていく方法を解説です。
fieldset要素やlabel要素を使用してまとめていきます。
<fieldset>
fieldset要素はフォーム部品のセットを表します。legend要素はfieldset要素でまとめたグループの見出しとなります。
label要素はフォーム部品の見出しを表します。フォーム部品とlabel要素を関連付けさせる方法は２つあり、以下のようになります。
label要素の中にフォーム部品を入れる。
<label> <input> </label>label要素のfor属性とフォーム部品のidを同じにする
<input id="□"> <label for="□"> </label>| HTMLタグ | 解説 |
| <fieldset> | フォーム部品のセット |
| <legend> | フォーム部品のセットの見出し |
| <label> | フォーム部品の見出し |
| 属性 | 解説 |
| for | フォーム部品と項目名の関連付け |
<form action="/">
<p>あなたの中で一番大事なものは何ですか？</p>
<fieldset>
<legend>大事なもの</legend>
<label><input type="radio" name="家族" value="1">家族</label>
<label><input type="radio" name="仕事" value="2">仕事</label>
<label><input type="radio" name="恋人" value="3">恋人</label>
<p><input type="submit" value="送信する"></p>
</fieldset>ブラウザ表示例
※表示例なので送信はされません。
