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, e.g.

<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