Horje
What is HTML <label> Tag | HTML Tag Code
What is HTML <label> Tag

The <label> tag defines a label for several 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>

Proper use of labels with the elements above will benefit:

  • Screen reader users (will read out loud the label, when the user is focused on the element)
  • Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area). 

Tips and Notes

Tip: The for attribute of <label> must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element. 


Browser Support


Create a HTML <label> Tag

Three radio buttons with labels.
index.html
Example: HTML
<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

How to add HTML <label> for Attribute

Three radio buttons with labels:

Definition and Usage

The for attribute specifies which form element a label is bound to.


Browser Support

Syntax

<label for="element_id">

Attribute Values

Value Description
element_id The id of the element the label is bound to

 

index.html
Example: HTML
 <form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form> 

Output should be:

How to add HTML <label> for Attribute

How to add HTML <label> form Attribute

A <label> element located outside a form (but still a part of the form):

Definition and Usage

The form attribute specifies the form the label belongs to.

The value of this attribute must be equal to the id attribute of a <form> element in the same document. 


Browser Support

Syntax

<label form="form_id">

Attribute Values

Value Description
form_id Specifies the form element the <label> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document.
index.html
Example: HTML
 <form action="/action_page.php" id="form1">
  <input type="radio" id="html" name="fav_language" value="HTML"><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

<label form="form1" for="html">HTML</label> 

Output should be:

How to add HTML <label> form Attribute

How to add HTML <input type="checkbox"> label Tag

Let the user select one or more options of a limited number of choices:

Definition and Usage

The <input type="checkbox"> defines a checkbox.

The checkbox is shown as a square box that is ticked (checked) when activated.

Checkboxes are used to let a user select one or more options of a limited number of choices.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Syntax

<input type="checkbox">

index.html
Example: HTML
 <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br> 

Output should be:

How to add HTML <input type= label Tag">

How to add HTML <input type="color"> label Tag

Show a color picker (with a predefined red value):

Definition and Usage

The <input type="color"> defines a color picker.

The default value is #000000 (black). The value must be in seven-character hexadecimal notation.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="color">

index.html
Example: HTML
 <label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000"> 

Output should be:

How to add HTML <input type= label Tag">

How to add HTML <input type="date"> label Tag

Show a date control:

Definition and Usage

The <input type="date"> defines a date picker.

The resulting value includes the year, month, and day.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="date">

index.html
Example: HTML
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"> 

Output should be:

How to add HTML <input type= label Tag">

How to add HTML <input type="datetime-local"> label Tag

Show a date and time control (no timezone) :

Definition and Usage

The <input type="datetime-local"> defines a date picker.

The resulting value includes the year, month, day, and time.

Tip: Always add the <label> tag for best accessibility practices! 


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="datetime-local">

index.html
Example: HTML
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">

Output should be:

How to add HTML <input type= label Tag">

How to add HTML <input type="email"> label Tag

Define a field for an e-mail address (validates automatically when submitted):

Definition and Usage

The <input type="email"> defines a field for an e-mail address.

The input value is automatically validated to ensure it is a properly formatted e-mail address.

To define an e-mail field that allows multiple e-mail addresses, add the "multiple" attribute.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="email">

index.html
Example: HTML
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"> 

Output should be:

How to add HTML <input type= label Tag">

How to add HTML <input type="file"> label Tag

Define a file-select field:

Definition and Usage

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

To define a file-select field that allows multiple files to be selected, add the multiple attribute.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="file">

index.html
Example: HTML
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"> 

Output should be:

How to add HTML <input type= label Tag">

How to add HTML <input type="month"> label Tag

Define a month and year control (no time zone):

Definition and Usage

The <input type="month"> defines a month and year control.

The format is "YYYY-MM".

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="month">

index.html
Example: HTML
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth"> 

Output should be:

How to add HTML <input type= label Tag">

How to add HTML <input type="number"> label Tag

Define a field for entering a number (You can also set restrictions on what numbers are accepted):

Definition and Usage

The <input type="number"> defines a field for entering a number.

Use the following attributes to specify restrictions:

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Syntax

<input type="number">

index.html
Example: HTML
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"> 

Output should be:

How to add HTML <input type= label Tag">

How to add HTML <input> max Attribute label Tag

Use of the min and max attributes.

Definition and Usage

The max attribute specifies the maximum value for an <input> element.

Tip: Use the max attribute together with the min attribute to create a range of legal values.

Note: The max and min attributes works with the following input types: number, range, date, datetime-local, month, time and week.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input max="number|date">

Attribute Values

Value Description
number Specifies the maximum value allowed
date Specifies the maximum date allowed
index.html
Example: HTML
<form action="/action_page.php">

  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>

  <input type="submit">

</form>

Output should be:

How to add HTML <input> max Attribute label Tag

How to add HTML <input> max Number Attribute label Tag

number Specifies the maximum value allowed
index.html
Example: HTML
<label for="quantity">Quantity (between 1 and 5):</label>
 <input type="number" id="quantity" name="quantity" min="1" max="5">

Output should be:

How to add HTML <input> max Number Attribute label Tag

How to add HTML <input> max Date Attribute label Tag

Use of the min and max attributes.

index.html
Example: HTML
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

Output should be:

How to add HTML <input> max Date Attribute label Tag

How to add HTML <input> min Attribute on label Tag

Use of the min and max attributes.

Definition and Usage

The min attribute specifies the minimum value for an <input> element.

Tip: Use the min attribute together with the max attribute to create a range of legal values.

Note: The max and min attributes works with the following input types: number, range, date, datetime-local, month, time and week.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input min="number|date">

Attribute Values

Value Description
number Specifies the minimum value allowed
date Specifies the minimum date allowed
index.html
Example: HTML
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">

Output should be:

How to add HTML <input> min Attribute on label Tag

How to add HTML <input> min number Attribute on label Tag

number Specifies the minimum value allowed
index.html
Example: HTML
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">

Output should be:

How to add HTML <input> min number Attribute on label Tag

How to add HTML <input> min date Attribute on label Tag

date Specifies the minimum date allowed
index.html
Example: HTML
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

Output should be:

How to add HTML <input> min date Attribute on label Tag

How to add HTML <input> step Attribute label Tag

An HTML form with an input field with a specified legal number intervals.

Definition and Usage

The step attribute specifies the interval between legal numbers in an <input> element.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.

Note: The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input step="number">

Attribute Values

Value Description
number Specifies the interval between legal numbers in the input field. Default is 1
any  
index.html
Example: HTML
<form action="/action_page.php">
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> step Attribute label Tag

How to add HTML <input> value Attribute label Tag

An HTML form with initial (default) values.

Definition and Usage

The value attribute specifies the value of an <input> element.

The value attribute is used differently for different input types:

Note: The value attribute cannot be used with <input type="file">.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<input value="text">

Attribute Values

Value Description
text Specifies the value of the <input> element
index.html
Example: HTML
<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" value="John"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

How to add HTML <input> value Attribute label Tag

How to add HTML <input type="password"> on label Tag

Define a password field (characters are masked).

Definition and Usage

The <input type="password"> defines a password field (characters are masked).

Note: Any forms involving sensitive information like passwords should be served over HTTPS.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Syntax

<input type="password">


index.html
Example: HTML
<form action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd" minlength="8"><br><br>
  <input type="submit">
</form>

Output should be:

How to add HTML <input type= on label Tag">

How to add HTML <input type="radio"> on label Tag

Radio buttons let a user select only one of a limited number of choices.

Definition and Usage

The <input type="radio"> defines a radio button.

Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.

Note: The radio group must share the same name (the value of the name attribute) to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.

Note: The value attribute defines the unique value associated with each radio button. The value is not shown to the user, but is the value that is sent to the server on "submit" to identify which radio button that was selected.

Browser Support

Syntax

<input type="radio">

index.html
Example: HTML
<form action="/action_page.php">
  <p>Please select your favorite Web language:</p>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>

  <br>  

  <p>Please select your age:</p>
  <input type="radio" id="age1" name="age" value="30">
  <label for="age1">0 - 30</label><br>
  <input type="radio" id="age2" name="age" value="60">
  <label for="age2">31 - 60</label><br>  
  <input type="radio" id="age3" name="age" value="100">
  <label for="age3">61 - 100</label><br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

How to add HTML <input type= on label Tag">

How to add HTML <input type="range"> on label Tag

Define a range control (like a slider control).

Definition and Usage

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control).

Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="range">

index.html
Example: HTML
<form action="/action_page.php">
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit">
</form>

Output should be:

How to add HTML <input type= on label Tag">

How to add HTML <input type="range"> Max Attribute on label Tag

Use of the min and max attributes.

index.html
Example: HTML
<form action="/action_page.php">
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit">
</form>

Output should be:

How to add HTML <input type= Max Attribute on label Tag">

How to add HTML <input type="range"> Min Attribute on label Tag

Use of the min and max attributes.

index.html
Example: HTML
<form action="/action_page.php">
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit">
</form>

Output should be:

How to add HTML <input type= Min Attribute on label Tag">

How to add HTML <input type="search"> on label Tag

Define a search field (like a site search, or Google search).

Definition and Usage

The <input type="search"> defines a text field for entering a search string.

Note: Remember to set a name for the search field, otherwise nothing will be submitted. The most common name for search inputs is q.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="search">

index.html
Example: HTML
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch"> 

Output should be:

How to add HTML <input type= on label Tag">

How to add HTML <input type="tel"> on label Tag

Define a field for entering a telephone number.

Definition and Usage

The <input type="tel"> defines a field for entering a telephone number.

Note: Browsers that do not support "tel" fall back to being a standard "text" input.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Syntax

<input type="tel">

index.html
Example: HTML
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> 

Output should be:

How to add HTML <input type= on label Tag">

How to add HTML <input type="text"> on label Tag

Define a single-line text field that a user can enter text into.

Definition and Usage

The <input type="text"> defines a single-line text field.

The default width of the text field is 20 characters.

Browser Support

Syntax

<input type="text">

index.html
Example: HTML
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"> 

Output should be:

How to add HTML <input type= on label Tag">

How to add HTML <input type="time"> on label Tag

Definition and Usage

The <input type="time"> defines a control for entering a time (no time zone).

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="time">

index.html
Example: HTML
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt"> 

Output should be:

How to add HTML <input type= on label Tag">

How to add HTML <input type="url"> on label Tag

Define a field for entering a URL.

Definition and Usage

The <input type="url"> defines a field for entering a URL.

The input value is automatically validated before the form can be submitted.


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="url">

index.html
Example: HTML
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage"> 

Output should be:

How to add HTML <input type= on label Tag">

How to add HTML <input type="week"> on label Tag

Define a week and year control (no time zone).

Definition and Usage

The <input type="week"> defines a week and year control (no time zone).

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Syntax

<input type="week">

index.html
Example: HTML
<label for="week">Select a week:</label>
<input type="week" id="week" name="week"> 

Output should be:

How to add HTML <input type= on label Tag">

How to add HTML <meter> with label Tag

Use the meter element to display a scalar value within a given range (a gauge).

Definition and Usage

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

Examples: Disk usage, the relevance of a query result, etc.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Attributes

Attribute Value Description
form form_id Specifies which form the <meter> element belongs to
high number Specifies the range that is considered to be a high value
low number Specifies the range that is considered to be a low value
max number Specifies the maximum value of the range
min number Specifies the minimum value of the range. Default value is 0
optimum number Specifies what value is the optimal value for the gauge
value number Required. Specifies the current value of the gauge
index.html
Example: HTML
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>

<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter> 

Output should be:

How to add HTML <meter> with label Tag

How to add HTML <meter> form Attribute with label Tag

A <meter> element located outside a form (but still a part of the form).

Definition and Usage

The form attribute specifies the form the <meter> tag belongs to.

The value of this attribute must be equal to the id attribute of a <meter> element in the same document. 


Browser Support

Syntax

<meter form="form_id">

Attribute Values

Value Description
form_id Specifies the form element the <meter> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document.
index.html
Example: HTML
<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

<p><label for="anna">Anna's score:</label>
<meter id="anna" form="form1" name="anna" min="0" low="40" high="90" max="100" value="95"></meter></p> 

Output should be:

How to add HTML <meter> form Attribute with label Tag

How to add HTML <meter> high Attribute with label Tag

A gauge with a current value and min, max, high, and low segments.

Definition and Usage

The high attribute specifies the range where the gauge's value is considered to be a high value.

The high attribute value must be less than the max attribute value, and it also must be greater than the low and min attribute values.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter high="number">

Attribute Values

Value Description
number Specifies a floating point number that is considered to be a high value
index.html
Example: HTML
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p> 

Output should be:

How to add HTML <meter> high Attribute with label Tag

How to add HTML <meter> low Attribute with label Tag

A gauge with a current value and min, max, high, and low segments.

Definition and Usage

The low attribute specifies the range where the gauge's value is considered to be a low value.

The low attribute value must be greater than the min attribute value, and it also must be less than the high and max attribute values.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter low="number">

Attribute Values

Value Description
number Specifies a floating point number that is considered to be a low value
index.html
Example: HTML
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>

Output should be:

How to add HTML <meter> low Attribute with label Tag

How to add HTML <meter> max Attribute with label Tag

A gauge with a current value and min, max, high, and low segments.

Definition and Usage

The max attribute specifies the upper bound of the gauge.

The max attribute value must be greater than the min attribute value.

If unspecified, the default value is 1.

Tip: The max attribute, together with the min attribute, specifies the full range of the gauge.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter max="number">

Attribute Values

Value Description
number Specifies a floating point number that is the maximum value of the gauge. Default value is "1"
index.html
Example: HTML
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p> 

Output should be:

How to add HTML <meter> max Attribute with label Tag

How to add HTML <meter> min Attribute with label Tag

A gauge with a current value and min, max, high, and low segments.

Definition and Usage

The min attribute specifies the lower bound of the gauge.

The min attribute value must be less than the max attribute value.

If unspecified, the default value is 0.

Tip: The min attribute, together with the max attribute, specifies the full range of the gauge.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter min="number">

Attribute Values

Value Description
number Specifies a floating point number that is the minimum value of the gauge. Default value is 0
index.html
Example: HTML
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p> 

Output should be:

How to add HTML <meter> min Attribute with label Tag

How to add HTML <meter> optimum Attribute with label Tag

A gauge with an optimal value of 0.5.

Definition and Usage

The optimum attribute specifies the range where the gauge's value is considered to be an optimal value.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter optimum="number">

Attribute Values

Value Description
number Specifies a floating point number that is the optimal value of the gauge
index.html
Example: HTML
<p><label for="yinyang">Yin Yang:</label>
<meter id="yinyang" value="0.3" high="0.9" low="0.1" optimum="0.5"></meter></p> 

Output should be:

How to add HTML <meter> optimum Attribute with label Tag

How to add HTML <meter> value Attribute with label Tag

A gauge with a current value and min, max, high, and low segments.

Definition and Usage

The required value attribute specifies the current, or "measured", value of the gauge.

The value attribute must be between the min and max attribute values.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<meter value="number">

Attribute Values

Value Description
number Required. Specifies a floating point number that is the current value of the gauge
index.html
Example: HTML
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p> 

Output should be:

How to add HTML <meter> value Attribute with label Tag

How to add HTML <progress> Tag with label Tag

Show a progress bar.

Definition and Usage

The <progress> tag represents the completion progress of a task.

Tip: Always add the <label> tag for best accessibility practices!


Tips and Notes

Tip: Use the <progress> tag in conjunction with JavaScript to display the progress of a task.

Note: The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Attributes

Attribute Value Description
max number Specifies how much work the task requires in total. Default value is 1
value number Specifies how much of the task has been completed
index.html
Example: HTML
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

Output should be:

How to add HTML <progress> Tag with label Tag

How to add HTML <progress> max Attribute with label Tag

Show a progress bar.

Definition and Usage

The max attribute specifies how much work the task requires in total.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<progress max="number">

Attribute Values

Value Description
number A floating point number that specifies how much work the task requires in total before it can be considered complete. Default value is 1.
index.html
Example: HTML
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress> 

Output should be:

How to add HTML <progress> max Attribute with label Tag

How to add HTML <progress> value Attribute with label Tag

Definition and Usage

The value attribute specifies how much of the task has been completed.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<progress value="number">

Attribute Values

Value Description
number A floating point number that specifies how much of the task has been completed
index.html
Example: HTML
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress> 

Output should be:

How to add HTML <progress> value Attribute with label Tag



Read Full::
HTML Tag Code
Category:
HTML Code
Sub Category:
HTML Tag Code
Uploaded:
3 weeks ago
Uploaded by:
Admin
Views:
111

Related Articles
What is HTML <!--...--> Tag HTML Tag Code
What is HTML <!DOCTYPE> Declaration HTML Tag Code
What is HTML Elements and Doctypes HTML Tag Code
What is HTML <a> Tag HTML Tag Code
What is HTML <abbr> Tag HTML Tag Code
What is HTML <address> Tag HTML Tag Code
What is HTML <applet> Tag HTML Tag Code
What is HTML <area> Tag HTML Tag Code
What is HTML <article> Tag HTML Tag Code
What is HTML <aside> Tag HTML Tag Code
What is HTML <audio> Tag HTML Tag Code
What is HTML <b> Tag HTML Tag Code
What is HTML <base> Tag HTML Tag Code
What is HTML <basefont> Tag HTML Tag Code
What is HTML <bdi> Tag HTML Tag Code
What is HTML <bdo> Tag HTML Tag Code
What is HTML <big> Tag HTML Tag Code
What is HTML <blockquote> Tag HTML Tag Code
What is HTML <body> Tag HTML Tag Code
What is HTML <br> Tag HTML Tag Code
What is HTML <button> Tag HTML Tag Code
What is HTML <canvas> Tag HTML Tag Code
What is HTML <caption> Tag HTML Tag Code
What is HTML <center> Tag HTML Tag Code
What is HTML <cite> Tag HTML Tag Code
What is HTML <code> Tag HTML Tag Code
What is HTML <col> Tag HTML Tag Code
How to create HTML <colgroup> Tag HTML Tag Code
What is HTML <data> Tag HTML Tag Code
What is HTML <datalist> Tag HTML Tag Code
What is HTML <dd> Tag HTML Tag Code
What is HTML <del> Tag HTML Tag Code
What is HTML <details> Tag HTML Tag Code
What is HTML <dfn> Tag HTML Tag Code
What is HTML <dialog> Tag HTML Tag Code
What is HTML <dir> Tag HTML Tag Code
What is HTML <div> Tag HTML Tag Code
What is HTML <dl> Tag HTML Tag Code
What is HTML <dt> Tag HTML Tag Code
What is HTML <em> Tag HTML Tag Code
What is HTML <embed> Tag HTML Tag Code
What is HTML <fieldset> Tag HTML Tag Code
What is HTML <figcaption> Tag HTML Tag Code
What is HTML <figure> Tag HTML Tag Code
What is HTML <font> Tag HTML Tag Code
What is HTML <footer> Tag HTML Tag Code
What is HTML <form> Tag HTML Tag Code
What is HTML <frame> Tag HTML Tag Code
What is HTML <frameset> Tag HTML Tag Code
What is HTML <h1> to <h6> Tags HTML Tag Code
What is HTML <head> Tag HTML Tag Code
What is HTML <header> Tag HTML Tag Code
What is HTML <hgroup> Tag HTML Tag Code
What is HTML <hr> Tag HTML Tag Code
What is HTML <html> Tag HTML Tag Code
What is HTML <i> Tag HTML Tag Code
What is HTML <iframe> Tag HTML Tag Code
What is HTML <img> Tag HTML Tag Code
What is HTML <input> Tag HTML Tag Code
What is HTML <ins> Tag HTML Tag Code
What is HTML <kbd> Tag HTML Tag Code
What is HTML <label> Tag HTML Tag Code

Single Articles
How to add HTML <label> for Attribute
How to add HTML <label> form Attribute
How to add HTML <input type="checkbox"> label Tag
How to add HTML <input type="color"> label Tag
How to add HTML <input type="date"> label Tag
How to add HTML <input type="datetime-local"> label Tag
How to add HTML <input type="email"> label Tag
How to add HTML <input type="file"> label Tag
How to add HTML <input type="month"> label Tag
How to add HTML <input type="number"> label Tag
How to add HTML <input> max Attribute label Tag
How to add HTML <input> max Number Attribute label Tag
How to add HTML <input> max Date Attribute label Tag
How to add HTML <input> min Attribute on label Tag
How to add HTML <input> min number Attribute on label Tag
How to add HTML <input> min date Attribute on label Tag
How to add HTML <input> step Attribute label Tag
How to add HTML <input> value Attribute label Tag
How to add HTML <input type="password"> on label Tag
How to add HTML <input type="radio"> on label Tag
How to add HTML <input type="range"> on label Tag
How to add HTML <input type="range"> Max Attribute on label Tag
How to add HTML <input type="range"> Min Attribute on label Tag
How to add HTML <input type="search"> on label Tag
How to add HTML <input type="tel"> on label Tag
How to add HTML <input type="text"> on label Tag
How to add HTML <input type="time"> on label Tag
How to add HTML <input type="url"> on label Tag
How to add HTML <input type="week"> on label Tag
How to add HTML <meter> with label Tag
How to add HTML <meter> form Attribute with label Tag
How to add HTML <meter> high Attribute with label Tag
How to add HTML <meter> low Attribute with label Tag
How to add HTML <meter> max Attribute with label Tag
How to add HTML <meter> min Attribute with label Tag
How to add HTML <meter> optimum Attribute with label Tag
How to add HTML <meter> value Attribute with label Tag
How to add HTML <progress> Tag with label Tag
How to add HTML <progress> max Attribute with label Tag
How to add HTML <progress> value Attribute with label Tag

Share on: