Broad Network


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

This is part 23 of my series HTML5 Basics. I assume you have read the other parts of the series before arriving here. The links of the other parts of the series are given at the end of this tutorial. In this part of the series, we look at HTML 5 label Basics for Controls.

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 Design
Web Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT

Comments

Become the Writer's Fan
Send the Writer a Message