HTML <label> Tag

We’re talking about Tag label with examples. This will fulfill the requirements for learning.

The HTML <label> tag defines a label for an HTML form element, such as <input>, <textarea>, <select>, etc.

Four radio buttons with labels:

Example:

<!DOCTYPE html> <html> <head> <title>Mr Examples</title> </head> <body> <form action="https://mrexamples.com/html/tags/tag-label/"> <label for="paypal">PayPal</label> <input type="radio" name="payment" id="paypal" value="paypal"><br> <label for="visa">Visa</label> <input type="radio" name="payment" id="visa" value="visa"><br> <label for="mastercard">Master Card</label> <input type="radio" name="payment" id="mastercard" value="mastercard"><br> <label for="cod">Cash on Delivery</label> <input type="radio" name="payment" id="cod" value="cod"><br><br> <input type="submit" value="Submit"> </form> </body> </html>

Table Of Content-

HTML <label> Tag:

Tag label Usage

A Tag label <label> provides a label for the following elements:

<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>

By appropriately applying labels with the elements above, you will be able to:

A screen reader user (when concentrating on the element, it will read the label out loud).
Users who have problems clicking on tiny elements (for example, checkboxes) – because when the user presses the text inside the <label> element, it activates the input (thereby expanding the hit area).

Advice: A <label> for an attribute should match the associated element’s id attribute to bind them collectively. Alternatively, a label can be attached to an element by putting the element within the <label> element.

HTML label Advantages

Using the <label> tag in HTML has several advantages:

The <label> tag is a crucial element for web accessibility. It helps screen readers and other assistive technologies to understand the relationship between the label and the form control, making it easier for users with disabilities to fill out web forms.
When you use the for attribute to link the <label> tag to the corresponding form control, clicking on the label will set focus on the form control. This makes it easier for users to interact with the form, especially on mobile devices with smaller screen sizes.
The <label> tag provides a visual label for form controls, which makes it easier for users to understand what information they are supposed to enter. This is especially important for longer forms with many fields.
The <label> tag can be styled with CSS to enhance its appearance, making it easier to match the form design with the overall website design.

Attributes

Global

In HTML, the Tag <label> accepts Global Attributes.

Event

In HTML, the Tag <label> accepts Event Attributes as well.

Browser Compatibility

Element
<label>	Yes	Yes	Yes	Yes	Yes

Attributes List

Attribute	Value	Overview
form	form_id	Indicates the form of the label.
for	element_id	Sets the id of the form element on which the label should be applied.

Predefined CSS

The majority of browsers will show the <label> element with the following values by default in Tag Label:

label {
cursor: default;
}

If you find this article informative, then do share this meaningful information with you friends by clicking on the links below.

We value your feedback.