HTML Tutorial / Form Validation with required, Length, and Range Limits

HTML's built-in form validation can check for missing values, text length, numeric ranges, and some input formats before submission. Attributes such as required, minlength, and max help the browser guide users. They do not replace validation on the server.

Require a value and limit its length

<form action="" method="get">
  <label for="nickname">Nickname (2–20 characters)</label>
  <input id="nickname" name="nickname" type="text"
         required minlength="2" maxlength="20">
  <button type="submit">Check</button>
</form>

Try submitting an empty field, then one character, then two characters. required checks for a value, while minlength checks the length of user-provided text; neither implies the other. The exact browser message varies by browser, operating system, and language. Tell users the rule before they submit rather than relying solely on an error message. Length constraints can behave differently for values filled by script, so test programmatic input separately if your form uses it.

maxlength="20" generally prevents users from typing more than its limit. HTML measures this limit in UTF-16 code units, which do not always match the number of visible characters—for example, with some emoji. If you allow such characters, test real input and the server's length rule together. See the MDN maxlength reference.

Check a range or basic format

<form action="" method="get">
  <label for="people">Participants (1–10)</label>
  <input id="people" name="people" type="number"
         min="1" max="10" step="1" required>

  <label for="email">Email address</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Check</button>
</form>

min and max set the range; step sets the allowed increment. Enter 0, 11, and 2.5 manually as well as trying the spinner controls. A value being visible in the input does not mean it is valid for submission. type="email" checks a basic address format, not whether the mailbox actually exists.

This is a GET form submitted to the current URL for practice. Use a test value such as name@example.com, not a real personal address. Once the values pass browser validation, you can inspect people and email in the URL query string. This example does not include a server that receives or stores the data.

Write actionable error guidance

Do not identify errors by color alone. “Enter a whole number from 1 to 10” tells users more than “Invalid input.” If you create custom messages, connect each message to the relevant control and check that keyboard users can return to it. The novalidate attribute on form skips interactive built-in validation on submission; do not add it merely to hide an issue.

A person can bypass browser checks with developer tools or a direct request. Always validate important data on the server, especially values used for accounts, payments, or stored records. Browser-side checks help users correct mistakes; server-side checks protect the application. See the MDN guide to constraint validation.

Test the rules yourself

1. Submit with each required field empty.
2. Try values just outside and inside every stated limit.
3. Use only the keyboard to reach the fields, read the errors, correct them, and submit again.