Open In App

HTML min Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

HTML min attribute specifies the minimum value for an input element. It is commonly used with input types like number, date, and time to define the minimum acceptable value. The value of the min attribute must be less than the value of the max attribute. It has a default value which is 0.

HTML min Attribute Supported Tags

  • <input>
  • <meter>

HTML min Attribute with <input> Tag

The HTML min attribute, used with the <input> tag, sets the minimum acceptable value for numerical inputs.

HTML min Attribute with <input> Tag Syntax:

<input min="number|date">

HTML min Attribute with <input> tag Example:

This example illustrates the use of the min attribute in the input element. 

HTML




<!DOCTYPE html>
<html>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>
        HTML | min Attribute in Input Field
    </h2>
    <form id="myGeeks">
        <input type="number"
               id="myNumber"
               step="5"
               name="geeks"
               placeholder="multiples of 5"
               min="10">
    </form>
    <br><br>
    <p style="font-size:20px;">
        The minimum value for an
        input field is 10.
    </p>
 
</body>
 
</html>


Output: 

HTML min Attribute with <input> tag Example Explanation:

Here is the explanation of above-example.

  • Here <input> field specifies a minimum value of 10 using the min attribute.
  • Utilizes <input type=”number”> to allow numerical input.
  • Input increments by 5, set by the step attribute.
  • Placeholder text prompts users to input multiples of 5, enhancing clarity and usability.

HTML min Attribute with <meter> tag

The HTML min attribute, employed within the <meter> tag, establishes the minimum value for the meter element. This attribute defines the lower bound for the displayed range of values.

HTML min Attribute with <meter> tag Syntax:

<meter min="number">

HTML min Attribute with <meter> tag Example:

This example illustrates the use of min attribute in a meter element. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | min attribute
    </title>
</head>
 
<body style="text-align:center;">
    <h1>GeeksforGeeks</h1>
    <h2>
        HTML | min Attribute:
    </h2>
    Sachin's score:
    <meter value="5"
           min="0"
           max="10"
           high="6">
        5 out of 10
    </meter>
    <br>
    Laxman's score:
    <meter value="0.5"
           max="1.0"
           min="0"
           high="0.6">
        50% from 100%
    </meter>
</body>
 
</html>


Output: 

HTML min Attribute with <meter> tag Explanation:

  • In this example we are used to display visualizations such as progress bars or gauges for Sachin and Laxman’s scores.
  • The min attribute sets the lowest acceptable value for the meter, ensuring accurate representation.
  • Sachin’s score is displayed as 5 out of 10, while Laxman’s score is presented as 50% out of 100%.
  • Enhances data presentation by visually representing the scores within defined ranges for clarity and comprehension.

HTML min Attribute Supported DOM Properties

The DOM Input Number min Property and the DOM Meter min Property can be used with the HTML min attribute.

HTML min Attribute Use Cases:

1. How to set a minimum and maximum value for an input element in HTML5 ?

Here we are using the min and max attributes within the <input> tag, specifying the minimum and maximum acceptable values respectively.

2. How to specify minimum &maximum number of characters allowed in an input field in HTML ?

Here we Specify minimum with minlength and maximum with maxlength attributes within the <input> tag to limit character count.

3. How to set minimum and maximum value of range in HTML5 ?

Use the min and max attributes within the <input type=”range”> tag to specify the minimum and maximum range values.

HTML min Attribute Supported Browsers

The browser supported by min Attribute are listed below: 

  • Google Chrome 4.0
  • Edge 12.0
  • Firefox 16.0
  • Opera 12.1
  • Safari 5.0


Last Updated : 20 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads