I can't seem to get fieldset
's to react properly when using display:table
and display:table-cell
even if I reset the default values, it just reacts oddly in a variety of ways in different browsers/devices, so as a result I have actually removed all fieldset
's and replaced them with div
's.
Is this a semantically accurate method to label a radio group? or is there a better more semantic method aside from using fieldset
/legend
?
<form method="get" novalidate>
<div class="table">
<div class="table-row">
<div class="table-cell label">
<label for="r1-group">Pet Type</label>
</div>
<div class="table-cell input">
<div id="r1-group" class="table-row radio-group neg41">
<div class="table-cell">
<input id="r3" name="same2" type="radio" />
<label for="r3" class="radio-label">Cat</label>
</div>
<div class="table-cell">
<input id="r4" name="same2" type="radio" />
<label for="r4" class="radio-label">Dog</label>
</div>
</div>
</div>
</div>
</div>
</form>
I've always approached it in this manner, but to avoid using flexbox and floats I used the above instead.
<form method="get" novalidate>
<fieldset class="table">
<div class="table-row">
<div class="table-cell label">
<legend for="r1-group">Pet Type</legend>
</div>
<div class="table-cell input">
<div id="r1-group" class="table-row radio-group">
<div class="table-cell">
<input id="r3" name="same2" type="radio" />
<label for="r3" class="radio-label">Cat</label>
</div>
<div class="table-cell">
<input id="r4" name="same2" type="radio" />
<label for="r4" class="radio-label">Dog</label>
</div>
</div>
</div>
</div>
</fieldset>
</form>
Should I be bolstering this with Schema's microdata and aria to improve semantics instead?
fieldset
, but you can't get it to render the way you want, ask on SO, stating what your expected rendering is, how the actual result differs, what browsers you have tested. \$\endgroup\$fieldset
is probably overkill for a single radio choice. \$\endgroup\$