[whatwg] Form Control Group Labels

Ian Hickson schrieb:
> On Tue, 31 Oct 2006, Lachlan Hunt wrote:
>> There are workarounds using fieldset and legend for the question, like 
>> this.
>>
>> <fieldset>
>>   <legend>Gender:</legend>
>>   <label for="m"><input type="radio" id="m" name="gender" value="m">
>>     Male</label>
>>   <label for="f"><input type="radio" id="f" name="gender" value="f">
>>     Female</label>
>> </fieldset>
> 
> That's not a workaround. It's exactly what you're supposed to do. 
> <fieldset> lets you group a set of controls with a common legend, which is 
> exactly the problem you described.

IMO Lachlans opinion about the fieldset solution being a workaround 
reflects a basic problem with those form elements: they are highly 
presentational. Your example:

<fieldset>
   <legend>Gender:</legend>
   <label for="m"><input type="radio" id="m" name="gender" value="m">
     Male</label>
   <label for="f"><input type="radio" id="f" name="gender" value="f">
     Female</label>
</fieldset>

serves the same purpose as this one:

<label for="gender">Gender:</label>
<select id="gender" name="gender">
   <option value=""> </option>
   <option value="m">Male</option>
   <option value="f">Female</option>
</select>

Both provide a list of values, of which zero or one can be selected. The 
only real difference is in the presentation, but structurally they are 
totally different. Now consider this:

<fieldset>
   <legend>Sender:</legend>
   <label for="n"><input type="text" id="n" name="n" value="">
     Name</label>
   <label for="m"><input type="text" id="m" name="m" value="">
     E-mail</label>
</fieldset>

This is structurally the same as the radio button example, except some 
attribute values, but serves a totally different purpose. If you look at 
it this way, calling the fieldset solution for grouping a group of radio 
buttons (which are actually grouped by their common name attribute 
value) a workaround does not seem totally wrong to me.

I consider a total re-thinking of select, input type="checkbox" and 
input type="radio" elements as highly desirable, though I see that this 
might cause more serious backwards compatiblity problems than for 
example removing the font tag. One possible solution could be using the 
select tag with a type attribute:

<label for="gender">Gender:</label>
<select id="gender" name="gender" type="boxgroup">
   <option value=""> </option>
   <option value="m">Male</option>
   <option value="f">Female</option>
</select>

Like this, the appearance would be controlled by the type and multiple 
attributes; type="boxgroup" in combination with multiple would create a 
group of checkboxes, without multiple a group of radio buttons. And 
older UAs would render it as a selectbox in all cases, thus preserving 
usability of the form.

And the label question would be consistently solved.

Received on Tuesday, 28 October 2008 09:39:54 UTC