How to use the label tag in HTML

problem

You wish to use a label in HTML to show some text on the webpage. A label can be used in combination with

a user-input tag like a textfield, checkbox, etc.
Or it can be used to keep a piece of data hidden from the user (for programming purposes).
Just by itself to show some data

SOLUTION

Using the <label> tag. It has an opening and a closing tag. (It’s not a self-enclosing tag like the image tag). For example:

label.html

				
					<label>This is a label</label>

output

It appears simply as a text.

Combining it with a text field

Let’s see an example that is combined with a text field. For example, we wish to collect the name of the user. We will need a label and a text field. In order to associate one element (tag) with the other one we need to use the for attribute and name attribute.

For example, we will name the text field “txtname” and we will link the label to it with the for attribute, for=”txtname”.

In simple words, we tell the browser that the label is for that particular text box.

label_with_textbox.html

				
					<label for="txtname">Please enter your name:</label>
<input type="text" name="txtname"/>

output

conclusion

In this post we saw how to use the label tag with a user input tag for making more user-friendly web pages.

Share it!

Ellion

Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪

Tagged user-input

0 0 votes

Article Rating