Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html

What is label element in HTML?

Adnan Abbas

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The <label> element is used to incorporate a text label with an <input> field. The label identifies the <input> field and informs users about what to enter in the field.

It is important to note that the <label> element only exists in relation to another element. In this case, it is associated with a form field (usually with some <input> element).

Syntax

<input id="first-name" name="first-name">
  <label for = "first-name"> First Name </label>

The for attribute identifies the <input> field to which the label is associated. The value in the for attribute should match the id of the <input> field.

Example

In the following example, we create three options using the checkbox type in the <input> field. Each label is associated with the <input> field through the for attribute.

Although it is possible to put unmarked text beside a form field to label it without the <label> element, having an associated label provides better usability. With a properly marked-up label, a user can easily select the option or zoom into it. This might not be noticeable in desktops or laptops, but it is an important feature in smartphones.

RELATED TAGS

html

CONTRIBUTOR

Adnan Abbas
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring