是否可以在表单的标签内使用标签？

Question

I am building a form which uses labels to define the input values (as many do).

A sample of this form can be seen here.

My issue, however, is in using things like checkboxes and radio buttons. While I want to define a group of input options, (say something like Gender), using to then surround my actual inputs with "male" and "female", it seems to cause conflicts, specifically styling wise given it takes the original css attributes.

What is the best/proper way to use labels within labels where the first label will define an overall area and the subsequent labels are used to merely define the specific input?

EDIT

The form I demo above is an example of an issue I am facing but for consistency, I plan to use this form styling across several (50+) pages of form collection so while possible, I am trying not to target a specific issue, rather solve something across many pages on my site.

Answer 1

I think you should use fieldset and legend tags instead, eg

<fieldset>
   <legend>Gender</legend>

   <label for="male"><input type="radio" ... />male</label>
   <label for="female"><input type="radio" ... />female</label>
</fieldset>

fieldset is a logical container for grouping related inputs and legend represents an introductory caption for the fieldset itself. Your fiddle updated: http://jsfiddle.net/zrqnT/4/

see also:
http://dev.w3.org/html5/spec/single-page.html#the-fieldset-element
http://dev.w3.org/html5/spec/single-page.html#the-legend-element

Answer 2

Here is the specification:

http://www.w3.org/TR/html5/forms.html#the-label-element

There it says:

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable form-associated element in the same Document as the label element. If the attribute is specified and there is an element in the Document whose ID is equal to the > value of the for attribute, and the first such element is a labelable form-associated > element, then that element is the label element's labeled control.

If the for attribute is not specified, but the label element has a labelable form-associated element descendant, then the first such descendant in tree order is the label element's labeled control.

So, you must provide a for attribute. But this can just be the case if you have a form control with the same id. It's not the case here.
Otherwise you can surround your code with a label, but then your elements must be labelable.

Labelable Elements are:

Labelable elements
Denotes elements that can be associated with label elements.

button input (if the type attribute is not in the hidden state) keygen meter output progress select textarea

So no chance for a label to have this specific behavior in your case

Use fieldset and legend instead

<fieldset>
    <legend>Gender: <em>*</em></legend>
    <label for="male"><input type="radio" name="gender" id="male" value="m" class="required" role="input" aria-required="true" />male</label>
    <label for="female"><input type="radio" name="gender" id="female" value="f" class="required" role="input" aria-required="true" />female</label>
</fieldset>

Answer 3

Simply use this CSS

#formWrapper label[for=male], #formWrapper label[for=female] { color: red; } 

This will allow you to change just those labels via straight CSS. The other option is to just use containing divs.

<div class="form-item">
    <label>Gender</label>
    <div class="radios">
         <label for="male">Male</label><input type="radio" for="male"/>
         <label for="female">Female</label><input type="radio" for="female"/>
    </div>
</div>

Answer 4

What Fabrizio said might work, but personally I would just use a heading. You don't necessarily have to use form elements for forms. Plus using a normal heading element would give you much greater flexibility as far as styling goes.

<div class="stage clear">
    <h3>Gender: <em>*</em></h3>
    <label for="male"><input type="radio" name="gender" id="male" value="m" class="required" role="input" aria-required="true" />male</label>
     <label for="female"><input type="radio" name="gender" id="female" value="f" class="required" role="input" aria-required="true" />female</label>
</div>