.
<label for="SOME_ID">Some nice description</label>
<input id="SOME_ID" type="text" value="" />
Now that is some complex code … most people do have labels but puts <strong> or <b> around them that could have been a <label>… but if you don’t want to display it … just put a display: none …
first one is for free…
I was actually really surprised to see the big bad daddy google not using it … one input box and no label tag … shame … i love their simplistic approach and i love them so i’ll write the code for them for free …
.
<label for="q" style="display: none">Google Search</label>
<input id="q" name="q" value="" />
Some info…
HTML <label> tag
Forms > Labels
Accessibility and the Label Tag
Day 28: Labeling form elements
Better Accessible Forms – that’s right 2002 !!
Accessibilty Tip: LABEL Your Form Elements … good article but no form on the pages uses <label> tag … WTF ...
some benefits
- accessibility accessibility accessibility
- a semantic “label” tag
- expands clickable areas (especially on radio/check boxes)
- screen readers can associate form elements with their “label”
- you too can claim to be a rocket science!!
get fancy with it …
digg does it really well … uses the label tag for “search the news…” and with a little css magic puts it inside the input box … BRILIANT
css beauty ... does a different approach … uses css magic to make it an icon … also BRILLIANT
There are plenty examples out there of people not using it… you know who you are ... i will charge a modest $200 an hour to put the complex <label> tags in …