HTML Label Element

The HTML label Elements tags are used to reference a form action element and also script examples of the label elements.
Attributes | Description |
for | Reference to the target ID Element. I.e: for="surname" |
from | HTML5, [Obsolete] Reference to the form containing the Target Element. Label elements are expected within a <form> Element. If the form="someFormId" is provided this allows you to place the Label anywhere in the document. |
About HTML Label Elements tags
The <label> element is used to reference a form action element. In the scope of User Interface it's used to ease the target / selection of elements like Type radio or checkbox.
<label> as wrapper
It can enclose the desired action element
<!DOCTYPE html>
<html>
<head>
<title>Atutorialhub demo title</title>
</head>
<body>
<label>
<input type="checkbox" name="Cats">
I like Cats!
</label>
</body>
</html>
(Clicking on the text the target input will toggle it's state / value)
<label> as reference
Using the for attribute you don't have to place the control element as descendant of label - but the for value must match it's ID
<!DOCTYPE html>
<html>
<head>
<title>Atutorialhub demo title</title>
</head>
<body>
<input id="cats" type="checkbox" name="Cats">
<label for="cats">I like Cats!</label>
</body>
</html>
Note Don't use more than one Control Element within an <label> element
Basic Use of label elements tags
Simple form with labels...
<!DOCTYPE html>
<html>
<head>
<title>Atutorialhub demo title</title>
</head>
<body>
<form action="/login" method="POST">
<label for="username">Username:</label>
<input id="username" type="text" name="username" />
<label for="pass">Password:</label>
<input id="pass" type="password" name="pass" />
<input type="submit" name="submit" />
</form>
</body>
</html>
Version ≥ 5
<!DOCTYPE html>
<html>
<head>
<title>Atutorialhub demo title</title>
</head>
<body>
<form id="my-form" action="/login" method="POST">
<input id="username" type="text" name="username" /><label for="pass">Password:</label>
<input id="pass" type="password" name="pass" />
<input type="submit" name="submit" />
</form>
<label for="username" form="my-form">Username:</label>
</body>
</html>
ATutorialHub Related Guide
HTML Tutorials Comments (9)
User Comments

panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot

raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts

Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it

Zain Khan
2021-09-18 15:07:23Great content and customized courses.

Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!

Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website

Sax
2021-09-25 19:35:50Nice website
Leave a Comment