HTML <label> Tag Definition, Usage and Examples

The <label> HTML Tag is used to define a caption for a user interface control, most commonly a form control, although it can contain any phrase material. The <label> HTML Tag enables the user to associate a caption/label with a control, informing the user of the control’s purpose. For instance, an input field that accepts the user’s first name could be labeled “First Name: “. Certain browsers allow users to select a radio button or checkbox option just by clicking on the <label> HTML Tag. The <label> HTML Tag is part of the Forms and Input HTML category in HTML Element Reference. The attributes of the <label> HTML Tag are for, form, global, and event attributes.

<label> code block example to learn how it works is given below. 

<label>First Name: <input type="text" id="fname"></label>

or

<label for="fname">First Name: </label>
<input type="text" id="fname">

The second example usage of the “<label>” code block example is given below.

<p>Which food do you like to eat?</p>
<form>
<label><input type="radio" name="food" value="pizza">Pizza</label>
<label><input type="radio" name="food" value="hamburger">Hamburger</label>
<label><input type="radio" name="food"
value="fish and chips">Fish and Chips</label>
<label><input type="radio" name="food"
value="none">None of the Above</label>
</form>

What is <label>  HTML Tag?

The <label> HTML Tag is used to enhance the usability of mouse users; for example, when a user clicks on the text included within the <label> HTML Tag, the control is toggled. The <label> HTML Tag specifies the label for an element such as <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea>. The <label> HTML Tag has two possible uses. Firstly, provide the <input> and id attributes in the <label> HTML Tag. An attribute with the same value as the input id is required for the <label> HTML Tag. Alternatively, user may use the <input> tag immediately within the <label> HTML Tag. The for and id properties are not required in this scenario because the association is implicit.

How to Use <label> HTML Tag?

To use the <label> HTML Tag, the site developer should use the syntax <label></label>, inserting the label text between the start and end tags. There are two ways to use the <label> HTML Tag. Users can either include the related control within the opening and closing tags of the <label> HTML Tag, or the user can use the for attribute to refer to the associated element by its ID.

Example Usage of <label>  HTML Tag?

The following examples of usage of <label> HTML Tag is given below. 

<p>Which place do you prefer to live in?</p>
<form>
<label><input type="radio" name="place"
value="city">Big City</label>
<label><input type="radio" name="place" value="town">Small Town</label>

What are the Attributes of <label>  HTML Tag?

There are multiple attributes for the <label> HTML Tag. The following attributes are listed below.

  • For attributes: The <label> HTML Tag supports for attributes. The for attributes specify the id of the form element to which the label should be bound.
  • Form attributes: The <label> HTML Tag supports form attributes. The form attributes define the form to which the label belongs.
  • Global Attributes: The <label> HTML Tag supports global attributes. All HTML elements, even those not specified in the standard, can have global attributes. This means that any non-standard elements must nevertheless allow certain characteristics, even if using such elements makes the content non-HTML5 compliant.
  • Event Attributes: The <label> HTML Tag supports event attributes. The Event Attributes always have a name that begins with “on” and is followed by the name of the event for which it is intended. They specify a script to run when an event of the defined type is dispatched to the element with the specified attributes.

What is the Default CSS Setting for <label> HTML Tag?

The following is the Default CSS Setting for the <label> HTML Tag.

.preference {
    display: flex;
    justify-content: space-between;
    width: 60%;
    margin: .5rem;
}

What are the Related other HTML Tags to <label>?

The other related HTML Tags to the <label> HTML Tag are listed below.

  • <form> HTML Tag: The <form> HTML Tag is related to <label> HTML Tag because they are both forms and input tags. Forms are created using the <form> HTML Tag.
  • <input> HTML Tag: The <input> HTML Tag is related to <label> HTML Tag because they are both forms and input tags. The <input> HTML Tag is used to specify the Input Element.
  • <textarea> HTML Tag: The <textarea> HTML Tag is related to <label> HTML Tag because they are both forms and input tags. The HTML Tag <textarea> is used to specify a text input element.
  • <button> HTML Tag: The <button> HTML Tag is related to <label> HTML Tag because they are both forms and input tags. The HTML button is created using the <button> HTML Tag.
Holistic SEO
Follow SEO

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.