Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add a label for a form control in HTML?
In HTML the <label> tag is used to define labels for serval elements like <input>, <progress>, <select>, <meter>, <textarea>.
<input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="search"> <input type="tel"> <input type="text"> <input type="time"> <input type="url"> <input type="week"> <meter> <progress> <select> <textarea>
Syntax
Following is the usage of <label> tag in HTML −
<label> form content... </label>
The <label> tag uses for and form attributes, now let us see the values and description of for and form attributes.
for − It specifies the id of form element the label is associated with. Following is the syntax of for attribute in label -
<label for="element_id">
form − This attribute is used, when there are multiple forms, and it specifies which form the label belongs to. let the value is form_id, below is the syntax of form attribute in label -
<label form="form_id">
Example
In the following example we are creating a form and adding labels to the controls in it.
<!DOCTYPE html> <html> <body> <h1>Welcome to TutorialsPoint</h1> <h2>The label for attribute</h2> <p>Click on one of the radio button:</p> <form action="/action_page.php"> <input type="radio" id="html" name="language" value="HTML"> <label for="html">HTML</label> <br> <input type="radio" id="css" name="language" value="CSS"> <label for="css">CSS</label> <br> <input type="radio" id="javascript" name="language" value="JavaScript"> <label for="javascript">JavaScript</label> <br> <br> <input type="submit" value="Submit"> </form> </body> </html>
Example
Let us see another example −
<!DOCTYPE html> <html> <body> <h1>Welcome to TutorialsPoint</h1> <h2>The label for form attribute</h2> <p>The label in the second radio button is outside the form, but still a part of the form. Try to click the "Teacher" text label to select the "Teacher" radio button.</p> <form action="/action_page.php" id="form1"> <input type="radio" id="student" name="person" value="STUDENT"> <label for="student">STUDENT</label> <br> <input type="radio" id="teacher" name="person" value="TEACHER"> <br> <input type="radio" id="admin" name="person" value="ADMIN"> <label for="admin">ADMIN</label> <br> <br> <input type="submit" value="Submit"> </form> <br> <label form="form1" for="teacher">TEACHER</label> </body> </html>
Example
In this example we are trying to create a sample login page and add labels to it.
<!DOCTYPE html> <html> <head> <title>HTML label Tag</title> </head> <body> <label for="email">EMAIL-ID: <br /> <input type="email" value="" name="emailid" size="30" placeholder="Enter a valid email address"> <br /> <br /> <label for="phone">PHONE NO: <br /> <input type="text" value="" name="phno" size="30" maxlength="10" placeholder="Enter a valid phone number" pattern="[0-9]{10}"> <br /> <br /> </body> </html> 
568 Views
