HTML 5 Label Basics for Controls
HTML5 Basics - Part 23
Forward: In this part of the series, we look at HTML 5 Label Basics for Controls.
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.
Why the Label Element
Consider the following web page:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form action="http://www.somewebsite/dir/file.exe" method="post">
<input type= "url" name= "engine" ><br>
<input type= "email" name= "email" ><br>
</form>
</body>
</html>
In this code, one input control is for a URL and the other is for an email. If this web page is displayed at the browser, the two input text controls will be displayed (you can try the code). Looking at the web page, you would not know which one is for URL and which one is for email. So each of these controls needs a label (text) to identify it (at the browser). So there is a need for an HTML label element.
HTML Label Element
The tags for the HTML label element are <label> and </label>. The label itself (text) and the corresponding control element become the content of the label element. For an email input control, you would have something like:
<label>Email: <input type= "email" name= "email" ></label>
In this case the label text (Email:) appears in front of the control field at the browser. If you want the label text to appear after the control at the browser, then type it after the control, but still inside the label element as in:
<label> <input type= "email" name= "email" > Email</label>
Try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form action="http://www.somewebsite/dir/file.exe" method="post">
<label>Uniform Resource Locator: <input type= "url" name= "engine" ></label><br>
<label>Email: <input type= "email" name= "email" ></label>
</form>
</body>
</html>
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