HTML number or text input: choose by the value, not its digits

Implementation choice

A stock intake screen has a count and a parcel code. The count can be incremented, compared, and bounded. The code may begin with zero and must retain every character exactly, so text with a numeric keyboard hint is a better fit. A browser may present number controls using the user's locale while submitting a normalized value, but it does not know the warehouse's maximum safe quantity. Keep the server's quantity rule separate from the UI control.

<form action="/stock/intake" method="post">
  <label for="received-units">Units received</label>
  <input id="received-units" name="units" type="number" min="1" max="47" step="1" required>
  <label for="parcel-code">Six-digit parcel code</label>
  <input id="parcel-code" name="parcel_code" type="text" inputmode="numeric" pattern="[0-9]{6}" required>
  <button type="submit">Record intake</button>
</form>

What remains outside the markup

The parcel code remains a string even when all six characters are digits. The server must reject missing, fractional, or out-of-range quantities and verify the code against its own records.

Cost and limits

Native controls avoid a custom widget. Validation and conversion cost little for two fields, but bad type selection can corrupt leading zeroes or produce confusing mobile input and error handling.

Common Mistakes

• Do not use type=number for postal codes or identifiers.
• Do not assume inputmode validates a text field.
• Do not accept a quantity solely because the browser allowed it.

Connected lessons

• HTML input types: choose controls from the value contract
• HTML pattern: validate a field's syntax without claiming identity
• HTML autocomplete and inputmode: describe purpose and keyboard hints
• HTML constraint validation: improve feedback without trusting the browser

Related: HTML telephone input: preserve symbols and validate your own format.

Continue with HTML number boundaries: align min, max, and step with the real unit.