Label tag in HTML

24-07-2022
Trung Minh
0 Comments

In this article, I will show you how to use the label tag in HTML, this is a tag used to create labels for objects in the form.

1. What is the label tag?

The label tag in html has the effect of setting a label to describe the input tag. In essence, the label tag doesn't show anything special to the user. However, when clicking on the content inside the label tag, the mouse pointer will automatically jump to the element that the label tag represents.

 <label for="id"></label>

Note : The for attribute of the label tag must be the same as the id of the input tag it represents.

You can use a span tag, a p tag, or any other tag to surround the label tag. You can also use CSS to customize how it looks.

2. How to use the label tag in HTML

For example , use the label tag to create labels for input tags.

 <!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại web888.vn</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <form action="/action_page.php"> <label>Name:</label> <input type="text" name="name"><br /> <label>Email:</label> <input type="text" name="email"><br /> </form> </body> </html>

3. The for attribute of the label . tag

As I said, the for attribute of the label tag has the effect of pointing to the input tag it represents. Its value must match the ID of that input tag, then when clicking on the label, the cursor will automatically jump to the input tag.

Example: Use the for attribute for the label tag.

 <!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại web888.vn</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <form action="/action_page.php"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br /> <label for="email">Email:</label> <input type="text" id="email" name="email"><br /> </form> </body> </html>