HTML input types: choose controls from the value contract

Last updated: 5 Oct 20266 min read

tutorial

An input type selects a browser control and may add type-specific validation, but it never defines the server contract alone.

Use it for a real task

A finance contact form collects a reply address and a whole-number batch count. The email type requests email-shaped input. A number control expresses a numeric quantity with a minimum and step; it is a poor choice for a receipt ID, where leading zeros and letters are meaningful. The server parses and bounds both fields again because requests can bypass the browser.

<form action="/finance/contact" method="post">
  <label for="reply-address">Reply address</label>
  <input id="reply-address" name="reply_address" type="email" required>
  <label for="batch-count">Batch count</label>
  <input id="batch-count" name="batch_count" type="number" min="1" max="47" step="1" required>
  <button type="submit">Send request</button>
</form>

What the markup guarantees

The endpoint must exist and validate each value according to its business meaning. Browser error messages can help a user correct input, but they are neither authorization nor an anti-abuse boundary.

Cost and limits

Native controls avoid custom parsing UI. They still require tests for empty input, decimals, exponent forms, locale display, and values outside the allowed range at the server boundary.

Common Mistakes

Do not use type=number for identifiers or postal codes.
Do not trust min and max as server-side validation.
Keep names stable because submitted entries use name, not id.

Connected lessons

Continue with HTML autocomplete and inputmode: describe purpose and keyboard hints.

html

forms