<input> — HTML5 Validation Attributes

HTML5 introduced validation attributes that let the browser verify input values without JavaScript. You can specify numeric ranges, character limits, and regular expression patterns using only HTML attributes.

Syntax

<!-- Restrict a numeric range -->
<input type="number" name="age" min="0" max="120" step="1">

<!-- Restrict character count -->
<input type="text" name="name" minlength="2" maxlength="50">

<!-- Validate with a regular expression pattern -->
<input type="text" name="zip" pattern="[0-9]{3}-[0-9]{4}"
  placeholder="123-4567">

<!-- Allow multiple email addresses -->
<input type="email" name="cc" multiple>

Attribute List

Attribute	Description
min	Specifies the minimum value allowed. Valid for number and date input types.
max	Specifies the maximum value allowed. Valid for number and date input types.
step	Specifies the increment interval. Also determines how much the value changes when clicking the spinner arrows on a number input.
minlength	Specifies the minimum number of characters allowed. Valid for text-based input types.
maxlength	Specifies the maximum number of characters allowed. The user cannot type beyond this limit.
pattern	Specifies a regular expression pattern to validate the input value against. Valid for text-based input types.
multiple	Allows comma-separated multiple email addresses for the email type, or multiple file selection for the file type.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Validation Attributes</title>
</head>
<body>

  <form>
    <!-- Character limit -->
    <p>
      <label for="uname">Username (2–20 characters):</label>
      <input type="text" id="uname" name="username"
        minlength="2" maxlength="20" required>
    </p>

    <!-- Postal code pattern validation -->
    <p>
      <label for="zip">Postal code (e.g. 123-4567):</label>
      <input type="text" id="zip" name="zipcode"
        pattern="[0-9]{3}-[0-9]{4}"
        placeholder="123-4567"
        title="Enter 7 digits including a hyphen">
    </p>

    <!-- Numeric range and step -->
    <p>
      <label for="score">Score (0–100, increments of 5):</label>
      <input type="number" id="score" name="score"
        min="0" max="100" step="5" value="50">
    </p>

    <!-- Multiple email addresses -->
    <p>
      <label for="cc">CC (multiple allowed, comma-separated):</label>
      <input type="email" id="cc" name="cc"
        multiple placeholder="a@mail.com, b@mail.com">
    </p>

    <p><button type="submit">Submit</button></p>
  </form>

</body>
</html>

Output

If you enter an invalid value in any field and click "Submit", the browser displays a validation error. For example, entering "1234567" (no hyphen) in the postal code field shows the message: "Enter 7 digits including a hyphen".

<!-- Example of a validation error -->
Postal code: [ 1234567 ] ← Click Submit and...
           ↓
"Enter 7 digits including a hyphen"
           (the content of the title attribute is shown)

Notes

HTML5 validation attributes let the browser automatically verify input values without any JavaScript. If a value fails validation, the form submission is blocked and an error message is shown to the user. Pairing the pattern attribute with the title attribute lets you provide a helpful hint message that guides the user when validation fails.

Browser-side validation can easily be bypassed using developer tools or curl. Always perform security-critical checks (character limits, format rules, invalid data, etc.) on the server side as well. HTML5 validation should be treated as a convenience feature that gives users quick feedback, not as a security boundary.

Numeric range constraints (min/max) are often used together with input type="number" / type="range". For date-type constraints, see the input type="date" family page.