Etykiety, pola wyboru i przyciski opcji

Moja aplikacja internetowa korzysta z formularzy przedstawionych w poniższym przykładzie ...

First Name      [____________]
Last Name       [____________]
Gender          () Male  () Female

Znaczniki, których używam to coś w rodzaju ...

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<label>Gender</label>
<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
</fieldset>

Mam następujące problemy, których nie wiem, jak rozwiązać ...

Chcę, aby CAŁA GRUPA przycisków radiowych była oznaczona jak każde inne pole (jak na powyższym diagramie), ale nic nie łączy tej etykiety z (tj. Nic dla jej atrybutu „for”, ponieważ każde radio w grupie ma swój własna etykieta tylko dla wartości pojedynczego przycisku radiowego) Etykieta bez atrybutu „for” nie przejdzie zgodności zgodności.

Element <legend> zestawu pól zdaje się powielać funkcję etykiety. Czy to naprawdę konieczne?

Zastanawiałem się nad stylizowaniem tagu <legend>, aby wyglądał tak, jakby był etykietą, i zrezygnowałem z całej etykiety dla grupy przycisków opcji, ale wydaje mi się to nieco hackie, a także wprowadzę złożoność w innym miejscu mojego kodu (co polega na elementach <label>, aby zrobić fajne znaczniki wiadomości sprawdzających poprawność i różne inne rzeczy)

Z góry dziękuję.

questionAnswers(2)

yourAnswerToTheQuestion