More on the HTML 5 label Element
Mastering HTML5 - Part 12
Forward: In this part of the series you will learn more on the HTML 5 label Element.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Direct Use of the label Element
The label element gives the label for a form control. Everything being equal, a form control, goes inside a double-tag label element. The control is part of the content of the label element. If you want the text label to be displayed in front of the control, you type it in front of the control as part of the content for the label element. If you want the label text to appear after the control, you type it after the control as part of the content for the label element. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form>
<p><label>First Name: <input type="text" Name="fname"></label></p>
<p><label><input type=checkbox name="apple" value="apple"> Apple</label></p>
</form>
</body>
</html>
The label element is a double-tag element.
Separating the label Element from the Control
The label element has an attribute called, the for attribute. You can separate the label element from the control and have both parts in the form. In this case, you need the for attribute. The value of the for attribute is the ID of the control element. In this situation the control element needs to have an ID. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form>
<p><label for="fn">First Name</label></p>
<p><input type="text" Name="fname" id="fn"></p>
</form>
</body>
</html>
Under this condition, in some browsers like Mozilla Firefox, if you click the label text, the control receives focus. I clicked the label text and the input text control received the I-bar (focus).
You can actually separate a control from a Form in your code. In this case the Form element has to know that it owns a particular control. Each control can have an attribute called the form attribute. The value of the form attribute is the ID of the Form. In this situation the Form needs to have an ID. The connection between the control and the Form is through the form attribute in the control’s tag and the ID of the Form element. The following code illustrates this:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p><label>First Name: <input type="text" name="fname" form="F1"></label></p>
<form method="post" action="http://somesite/file.ext" id="F1">
<button type="submit">Send</button>
</form>
</body>
</html>
When a control is typed inside a Form, everything being equal, the Form owns that control.
You can also separate the label element from the control and separate the control from the Form as in the following code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p><label for="fn">First Name: </label>
<p><input type="text" name="fname" form="F1" id="fn"></p>
<form method="post" action="http://somesite/file.ext" id="F1">
<button type="submit">Send</button>
</form>
</body>
</html>
In this code, when the form is submitted, the name and value of the input text control will be part of the data set sent to the server by the form. Remember, the data set is all the name/value pairs of a form.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT