Primal Skill - Dream. Design. Execute.

Tick A Radio Input Element By Clicking On The Text

Have you ever wondered how you can tick a radio input element by clicking on the text near of it. You can try this out if you go to www.primalskill.com/en/contact and click the text of the radios.

This could be done if you are coding your sites by W3C standards and using the label element proprely. “The Label element is used to specify labels for controls that do not have implicit labels” (w3c.org) and using the label element’s for attribute correctly.

“The for attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document.” (w3c.org)

If you associate a label with a radio or a checkbox element then the effect will be like mentioned above.

Example:

<input type="radio" name="gender" value="0" id="gender_0" /><label for="gender_0">Male</label>
<input type="radio" name="gender" value="1" id="gender_1" /><label for="gender_1">Female</label>

By clicking on the text Male or Female it will select the associated radio element. (You can use this with checkbox elements too)

If you enjoyed this article then help spread the word and please follow us on Twitter or subscribe to our RSS feed.