So.. I have been trying to avoid radio buttons at all cost in my web development projects because I just cant figure out the right way to code them.
Do you set a label for radio button.. if so, how does that work for screen readers.
The way I have been doing most of my forms is by using un-ordered lists. Each input being a list item. I just always run into trouble when doing radio buttons. I can never get it to look right across all browsers..
For example, look at http://usfultimate.com/index.php/hatter/register . Does this structure make sense?
Quick structure sample:
<ul>
<li>
<label for='first_name'>First Name:</label>
<input type="text" name="first_name" value="" />
</li>
<li>
<label for='last_name'>Last Name:</label>
<input type="text" name="last_name" value="" />
</li>
<li>
<label for='email'>Email Address:</label>
<input type="text" name="email" value="" />
</li>
<li class="radio">
<ul>
<li>
<input type="radio" name="skill" value="Never Played" id="neverPlayed" />
<label for="neverPlayed">Never Played</label>
</li>
<li>
<input type="radio" name="skill" value="Unorganized Pickup"
id="unorganizedPickup" />
<label for="unorganizedPickup">Unorganized Pickup</label>
</li>
<li>
<input type="radio" name="skill" value="Organized Pickup / League Play"
id="organizedPickup" />
<label for="organizedPickup">Organized Pickup or League Play</label>
</li>
<li>
<input type="radio" name="skill" value="Played on a Competative Team"
id="competativeTeam" />
<label for="competativeTeam">Competative Team</label>
</li>
<li>
<input type="radio" name="skill" value="Baller Shot Caller" id="baller" />
<label for="baller">Baller Shot Caller</label>
</li>
</ul>
</li>
</ul>
Any pointer would be appreciated!