HTML label Tag

HTML label: Main Tips

• HTML label acts as a caption for a specified element.
• It is very convenient to use HTML label for <input> elements. It increases the clickable area, as clicking the label activates the input as well.
• An input element can also be nested inside the HTML label tag.
• You must include the closing tag.

Using label Tag

The <label> element specifies an HTML label for a given element:

<label>My Name Field</label>
<input type="text" name="myName" class="myNameInput" required/>

The element that has an HTML label is called the labeled control.

Note: one element can have multiple labels.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Attributes for label

The for attribute HTML label tags include must have a value equal to the id of an element. The label is applied to the first labelable element in the document that matches the specified value:

<label for="phone">My Phone Number:</label>
<input type="text" value="" name="phoneNo" id="phone" size="30" placeholder="Provide your phone number">

The form attribute was added in HTML5. It is also used to specify the element to label, but only works with <form> elements:

<form id="userform">
  <label for="uname">Username</label>
  <input type="text" id="uname"><
  <label for="pass" form="userform">Password</label>
  <input type="password" id="pass">
  <input type="submit" value="Submit">
</form>

Browser support

Chrome

All

Edge

All

Firefox

All

IE

All

Opera

All

Safari

All

Mobile browser support

Chrome

All

Firefox

All

Opera

All

Safari

All