Можно ли использовать метки внутри меток в форме?

Я думаю, вам следует использовать вместо этого теги fieldset и legend, например.

<fieldset>
   <legend>Gender</legend>

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

fieldset — это логический контейнер для группировки связанных входных данных, а legend представляет вводную подпись для самого набора полей. Ваша скрипка обновлена: http://jsfiddle.net/zrqnT/4/

см. также:
http://dev.w3.org/html5/spec/single-page.html#the-fieldset-element
http://dev.w3.org/html5/spec/single-page.html#элемент-легенды

Вот спецификация:

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

Там сказано:

Атрибут for может быть указан для указания элемента управления формы, с которым должен быть связан заголовок. Если атрибут указан, значение атрибута должно быть идентификатором маркируемого элемента, связанного с формой, в том же документе, что и элемент метки. Если атрибут указан и в документе есть элемент, идентификатор которого равен > значению атрибута for, и первый такой элемент является маркируемым элементом >, связанным с формой, то этот элемент является помеченным элементом управления элемента метки.

Если атрибут for не указан, но элемент метки имеет маркируемый потомок элемента, связанного с формой, то первый такой потомок в порядке дерева является маркированным элементом управления элемента метки.

Итак, вы должны предоставить атрибут for. Но это может быть только в том случае, если у вас есть элемент управления формой с тем же идентификатором. Здесь это не так.
В противном случае вы можете окружить свой код меткой, но тогда ваши элементы должны быть маркируемыми.

Маркируемые элементы:

Labelable elements
Обозначает элементы, которые могут быть связаны с элементами label.

кнопка ввода (если атрибут type не в скрытом состоянии) кейген метр вывод прогресса select textarea

Таким образом, у ярлыка нет шансов иметь такое конкретное поведение в вашем случае.

Вместо этого используйте набор полей и легенду

<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>

Просто используйте этот CSS

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

Это позволит вам изменить только эти метки с помощью прямого CSS. Другой вариант — просто использовать содержащие div.

<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>

То, что сказал Фабрицио, может сработать, но лично я бы просто использовал заголовок. Вам не обязательно использовать элементы формы для форм. Кроме того, использование обычного элемента заголовка даст вам гораздо большую гибкость в отношении стиля.

<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>