HTML Label Element

HTML Label Element
Nikhil
Published on 2021-07-02 03:23:52

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 (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website