fieldset要素によるフォーム部品のグループ化
「性別」や「生年月日」など複数のフォーム部品をグループ化し、かつそのフォームグループの見出しを設定したい場合には、原則としてfieldset要素とlegend要素を使用するようにする。
このようにマークアップすることで複数のフォーム部品を構造的にグループ化し、グループの見出しも明示できるようになる。
<fieldset class="form__item">
<legend class="form__ttl">性別<span class="label-any">任意</span></legend>
<div class="form__body">
<ul class="radioList">
<li><label><input type="radio" name="gender" value="男"><span>男</span></label></li>
<li><label><input type="radio" name="gender" value="女"><span>女</span></label></li>
<li><label><input type="radio" name="gender" value="その他"><span>その他</span></label></li>
</ul>
</div>
</fieldset>