View video tutorial

HTML min Attribute

HTML

The HTML min attribute specifies the minimum valid value for an <input> element or a <meter> element.

Definition and Usage


➔ The min attribute is used with <input> elements that work with specific types of attributes:(e.g <input type="number" min="0">)

  • number
  • range
  • date
  • month
  • week
  • time
  • datetime-local

➔ The min attribute is used for validation on the <input> element, if the user enters a value lower than the min value, the form validation will fail.

➔ For the <meter> element, the min attribute specifies the lower numerical limit of the range. Default is 0.

➔ Note: The <progress> element does not support the min attribute.

Syntax
//In HTML
<label for="marks">Marks (Min 0):</label>
<input type="number" id="marks" name="marks" max="100" min="0"><br><br>
<label for="cpuusage">CPU Usage:</label>
<meter id="cpuusage" value="52" min="0" max="100" low="50" high="90">30%</meter><span id="cpuusagevalue">
</span>%

//In JavaScript
<script>
    let cpu = document.querySelector("#cpuusage");
    //cpu.value=45;
    //cpu.setAttribute("min","0")
    document.querySelector("#cpuusagevalue").textContent = cpu.value;
</script>

Applies to

This attribute can be used on the following element.

Attribute Element
min <input> <meter>

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML min attribute example</title>
    <style>
        .mydiv {
            border: 2px solid black;
            padding: 30px;
            background: rgb(100, 100, 100, 0.3);
        }
        input {
            padding: 3px;
        }
        button {
            margin: 10px 75px;
            padding: 3px;
        }
    </style>
</head>
<body>
    <div class="mydiv">
        <h3>HTML min attribute example</h3>
        <p>The min attribute specifies the minimum value acceptable for an element.</p>
        <label for="marks">Marks (Min 0):</label>
        <input type="number" id="marks" name="marks" max="100" min="0"><br><br>
        <label for="cpuusage">CPU Usage:</label>
        <meter id="cpuusage" value="52" min="0" max="100" low="50" high="90">30%</meter><span id="cpuusagevalue">
        </span>%
    </div>
</body>
<script>
    let cpu = document.querySelector("#cpuusage");
    //cpu.value=45;
    //cpu.setAttribute("min","0")
    document.querySelector("#cpuusagevalue").textContent = cpu.value;
</script>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.