TLDR: see last example, it doesn't validate. Halp.
I'm using Bootstrap 3 to layout a form, in 2 columns like this:
<div class="form-group row">
<div class="col-sm-3">
<label for="c_title">Survey title</label>
</div>
<div class="col-sm-9">
<input name="c_title" id="c_title" >
</div>
</div>
So far so good. This looks right, and also validates.
Then, later in the form I have row which is a collection of options...
<div class="form-group row">
<div class="col-sm-3">Survey options</div>
<div class="col-sm-6">
<label><input type="checkbox" name="opt1" >option #1</label>
<label><input type="checkbox" name="opt2" >option #2</label>
<label><input type="checkbox" name="opt3" >option #3</label>
</div>
</div>
I think I really should use <fieldset>
and <legend>
there, to be nice...
<fieldset class="form-group row">
<legend class="col-sm-3">Survey options</legend>
<div class="col-sm-9">
<label><input type="checkbox" name="opt1" >option #1</label>
<label><input type="checkbox" name="opt2" >option #2</label>
<label><input type="checkbox" name="opt3" >option #3</label>
</div>
</fieldset>
With a bit of CSS to make it look sensible this also looks right and validates.
However I also want to drop an extra element or two into the left hand column. These might be a little popup text bubble, or some extra text noting constraints (e.g. "(max 200 chars)").
I don't think those bits belong inside the <legend>
as such, and my understanding is that the whole <legend>
gets read out for each form-control within the fieldset .. so that would be quite tedious to a11y users. (BTW, I'll probably link the legend to the span text via aria-describedby).
So I code it like this:
<fieldset class="form-group row">
<div class="col-sm-3">
<legend>Survey options</legend>
<span class="muted">(see HR manual page 321)</span>
<button type="button" id="beta2"></button>
</div>
<div class="col-sm-9">
<label><input type="checkbox" name="opt1" >option #1</label>
<label><input type="checkbox" name="opt2" >option #2</label>
<label><input type="checkbox" name="opt3" >option #3</label>
</div>
</fieldset>
This still looks right in the browser, however it does not validate. Apparently, the <legend>
must be the first and immediate child of <fieldset>
.
Any suggestions on how I might handle this? Is the html5 spec overly fussy on this point?
<legend></leg><div><span><button></div>
?<legend>
will mess up the display of the columns of the<div>