I was thinking about making use of <label> tags in my validation error summary on a failed form submit and I can't figure out if it is going to get me in trouble down the line. Can anyone think of a good reason to avoid this approach? Usability, functionality, design, or other issues are all helpful.
I really like the idea of clicking a line item in the error list and being jumped to the offending input element, especially in a mobile HTML scenario where vertical
orientation is more common and scrolling is a pain. So far the only problem I can find is that labels don't navigate for radio buttons or checkboxes without individual IDs (Clicking a label for a single ID-tagged radio/checkbox element alters its selection). It doesn't make it any worse than no label, though.
Here is a stripped down HTML test sample of this idea (CSS omitted for simplicity).
<div class="validation-errors">
<p>There was a problem saving your form.</p>
<ul>
<li><label for="select1">Select 1 is invalid.</label></li>
<li><label for="text1">Text 1 is invalid.</label></li>
<li><label for="textarea1">TextArea 1 is invalid.</label></li>
<li><label for="radio1">Radio 1 is invalid.</label></li>
<li><label for="checkbox1">Checkbox 1 is invalid.</label></li>
</ul>
</div>
<form action="/somewhere">
<fieldset><legend>Some Form</legend>
<ol>
<li><label for="select1">select1</label>
<select id="select1" name="select1">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option selected="selected" value="value3">Value 3</option>
</select></li>
<li><label for="text1">text1</label> <input id="text1" name="text1" type="text" value="sometext" /></li>
<li><label for="textarea1">textarea1</label> <textarea id="textarea1" name="textarea1" rows="5" cols="25">sometext</textarea></li>
<li><ul>
<li><label><input type="radio" name="radio1" value="value1" />Value 1</label></li>
<li><label><input type="radio" name="radio1" value="value2" checked="checked" />Value 2</label></li>
<li><label><input type="radio" name="radio1" value="value3" />Value 3</label></li>
</ul></li>
<li><ul>
<li><label><input type="checkbox" name="checkbox1" value="value1" checked="checked" />Value 1</label></li>
<li><label><input type="checkbox" name="checkbox1" value="value2" />Value 2</label></li>
<li><label><input type="checkbox" name="checkbox1" value="value3" checked="checked" />Value 3</label></li>
</ul></li>
<li><input type="submit" value="Save & Continue" /></li>
</ol>
</fieldset>
</form>
The only thing I have added to make the click-capable behavior more obvious is to add a CSS rule for the labels.
.validation-errors label { text-decoration: underline; cursor: pointer; }
