geeky · non php code

label IDs and input effects

this is nothing new but i didn’t learn about it until yesterday and it totally made my day. basically if you use code like:

<label for="checkme">Check me:</label> <input type="checkbox" id="checkme"/>
<br />
<br /> 
<label for="radio1">Radio 1:</label> <input type="radio" id="radio1" name="something" value="on"/> <label for="radio2">Radio 2:</label> <input type="radio" id="radio2" name="something" value="off"/>

clicking on the corresponding label text will check/uncheck the checkbox & radio buttons for you.

click for an example.

as long as the label for attribute matches the id attribute inside of the input tag, clicking on the text always have some type of effect on the input field. mostly just set the focus on the input field. the coolest ones are the checkbox and the radio buttons as you can see in the example.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s