Basic HTML: label Label for Attributes

Reprinted, Master drifting...

Shame: I have never understood the difference between a label and a span label. It seems that the display methods and functions are the same. The biggest difference between a label and a label is its for attribute.

A label is usually written in a form. The biggest difference between a label and a common span isCan be paired with form elements, Such as text box, single sheet, and check box. The pairing method uses the label's for attribute.

For example

1. < Input   Type = "Text"   Name = ""   ID = "Text"   /> < Label   For = "Text" > A label with a text box </ Label > < BR />

1. < Input   ID = "User3"   Type = "Radio"   Name = "Gender"   Value = "3" >

1. < Span   For = "User3" > A span </ Span >

1. < Label   For = "User3" > Label with radio </ Label >

Test and aboveCode, You will find that when you click the label of "configuration text box", the input: text label in front of it gets the focus (you can enter )! When you click "Configure radio", the single-worker radio in front of it is selected. However, when you click "one span", the single-worker will not respond much, although they are closer.

This is only because of the label for attribute. It specifies a target for the label, which is generally the ID of an element in the form, so that the label can be associated with the ID element. When you click the label, this Id also gets the focus!

In the code, I also added for to span, but it does not work. This is the difference between Span and label.

If you do not want to add for to the label, but want to associate the text after the input element with the input itself, you can also do this:

1. < Label > < Input   Type = "Checkbox"   Name = "Aksd"   ID = "Aksd"   /> Several words </ Label >

Is to use label to package input. The effect is the same as that of the label followed by the for parameter:Click Text to select the check box.

Similarly, changing the label in the code to span won't work.

Note::Label package input method, which is invalid in IE6!

However, we recommend that you separate the input and label modes. Because this is more flexible, you can place the input and label fields in different places, but they are still related to each other-how loyal and tearful love!

link to this article: http://www.jo2.org/archives/224.htm.record.