HTML Input Attributes

Understand the topic

Input attributes express constraints and hints. required requests a value, minlength and maxlength constrain suitable text inputs, min and max constrain compatible numeric or date types, and pattern defines a text pattern. readonly values can be submitted, while disabled controls are normally excluded. Validation messages and date formats vary by browser and locale.

Worked example

<form id="code-form">
<label for="member-code">Member code: three uppercase letters</label>
<input id="member-code" name="member_code" pattern="[A-Z]{3}" minlength="3" maxlength="3" required aria-describedby="code-help">
<p id="code-help">For example, ABC.</p><button type="submit">Check code</button>
</form><p id="code-result" role="status"></p>
<script>document.querySelector("#code-form").addEventListener("submit", e => { e.preventDefault(); document.querySelector("#code-result").textContent = "The code matches the requested format."; });</script>

The text instruction explains the pattern in words. A successful browser validation checks format, not whether that member code exists in a database.

Practice

Create a required integer quantity from one to ten.

<input name="quantity" type="number" min="1" max="10" step="1" required>

Common mistake

Client-side validation can be bypassed. Repeat all important validation on the server, including authorization and allowed values.

HTML documentation