HTML Form Label
HTML TUTORIAL NO: 19
HTML Form Labels
The Form Label <label> is used to specify a label for an <input> element of a form. An HTML Form Label is an inline element.
It can be associated with form elements or form controls like an input, text area and select for accessibility purpose.
The HTML Form Label element defines <label> tag.
The associate a label to an input we can use the for attribute with the value same as the input’s id attribute.
Example of THML Form Label
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Label</title> </head> <body> <label for="name">Name: </label> <input type="text" id="name"> <label for="class">Class</label> <input type="text" id="class"> </body> </html> |
Output of above Example
 |
We use the label <label> in HTML Form for accessibility purpose, when we click the name and class the text area is focused when we use the <label> in form but when we not use the <label> in HTML Form the text area is not focused.
Styling HTML Form Label
We can also style the HTML Form Labe through the CSS; in next example of HTML Form Label we see the styling HTML Form Labels.
Example of Styling HTML Form Label
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Label</title> <style type="text/css"> label{color: rgb(32, 5, 2); border: 2px inset gold; border-radius: 5px; background-color: rgb(59, 226, 17); padding-right: 4px; padding-left: 4px; margin-right: 3px; } </style> </head> <body> <label for="name">Name: </label> <input type="text" id="name"> <br> <label for="class">Class:</label> <input type="text" id="class"> <br> <label for="email">E-mail</label> <input type="email" id="email"> <br> <label for="password">Password:</label> <input type="password" id="passsword"> <br> <input type="submit" id="submit"> </body> </html> |
Output of above Example
 |
In above example you can see the label is stylish and colorful, we use in example CSS styling.
In this tutorial we learned HTML Form Label, simple and styling label with examples, and in next tutorial we will learn HTML Input Type. Learn HTML Input Type–
Learn Also-
4 Comments
Mutuma Jairus · January 18, 2022 at 5:12 pm
To learn and practice
Raul Egelhoff · September 23, 2022 at 7:03 am
Nice read, I just passed this onto a friend who was doing a little research on that. And he actually bought me lunch because I found it for him smile Therefore let me rephrase that: Thanks for lunch! “There are places and moments in which one is so completely alone that one sees the world entire.” by Jules Renard.
zoritoler imol · November 10, 2022 at 5:09 pm
You are my aspiration, I own few web logs and occasionally run out from to brand.
this link · April 25, 2023 at 12:00 pm
This blog is obviously cool additionally informative. I have chosen a bunch of useful stuff out of this blog. I ad love to return every once in a while. Thanks a lot!