7 replies [Last post]
Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 12 years 35 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

I've seen this going around on the board however i never heard of it before coming here.

Just wondering what it does exactly?

Thanks Smile

Dan.

I am Dan, Dan I am.

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 24 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

<label> tag

It's used in conjunction with input fields to describe what they are.

For example you might have the form some thing like this

Name           ------- Input box
Password       ------- Input box

Where the "Name" relates to the input box next to it, it should obvious to people who are looking at a screen by the layout but if you are using screen readers and such like it might not be obvious which lable points to which input box if there are a lot of them. So you can use the lable to point the "Name" at the input box it related to with the lable tag like so

<label id="NameLabel" for="Name">Name: *</label>
<input id="Name" type="text" />
 

If you use this the two become tied together. Now if you click on the "Name" it should take you to the input field.

For more details try looking at

http://brainstormsandraves.com/archives/2004/07/06/accessibility/

For a more detailed look at accessible forms

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 12 years 35 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

&lt;label&gt; tag

Ah thanks a lot, really cleared that up for me Smile

I am Dan, Dan I am.

vandenburg
Offline
newbie
London
Last seen: 16 years 27 weeks ago
London
Joined: 2004-05-26
Posts: 9
Points: 0

&lt;label&gt; tag

They also enable the text used for labelling check boxes and radio buttons to become clickable, once you start using this markup you'll wish everyone dose!

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

&lt;label&gt; tag

briski
I've coded it this way
<label for="firstname">First Name</label><input type="text" name="firstname" id="firstname" />

Am I incorrect?

vandenburg
Offline
newbie
London
Last seen: 16 years 27 weeks ago
London
Joined: 2004-05-26
Posts: 9
Points: 0

&lt;label&gt; tag

thats right briski

seb
Offline
Enthusiast
Last seen: 13 years 44 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

&lt;label&gt; tag

Additionally

1) if you nest the input/textarea/select inside the <label> tag you can omit the "for" attribute and don't need to give the input field an id, though obviously you lose layout flexibility.

2) I'm a fan of assigning the followign style to <label>s:

label
{ cursor: hand;
c\ursor: pointer;}

(the hand one is for IE5, pointer for everything else. I think that does the trick in most all browsers?)

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 24 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

&lt;label&gt; tag

Hmm Seb, that's a nice tip! I was pondering how I can make it obvious that you can interact with the labels and now it's clear, cheers Laughing out loud

However "hand" is not a valid value - so I might just ignore IE 5 Users.
Also the c/ursor bit does not work in Firefox.

vandenburg - You're right, I do wish everyone used them, Especialy on error messages that appear on long forms, I do hate scrolling when I don't HAVE to.