HTML telephone input: preserve symbols and validate your own format

Use case

A depot contact field accepts international numbers. A number input would be the wrong model: phone numbers can contain a leading plus sign, spaces, extensions, and leading zeroes that are identifiers rather than quantities. The visible help asks for a country code and explains the intended format, while autocomplete tells the browser the field's purpose. The application must normalize only according to a documented policy, validate the number for the supported regions, and confirm consent before using it for calls or messages.

<form action="/depots/west/contact" method="post">
  <label for="dispatch-phone">Dispatch telephone number</label>
  <p id="phone-help">Include the country code, such as +44 20 7946 0472.</p>
  <input id="dispatch-phone" name="telephone" type="tel" autocomplete="tel" aria-describedby="phone-help" required>
  <button type="submit">Review contact change</button>
</form>

Behavioral boundary

Type=tel can influence mobile keyboard layout but does not guarantee a valid number or a callable endpoint. A copied number and a malicious request can bypass every client-side hint.

Cost and maintenance

The native field adds no script bundle. Region-aware parsing, persistence, and consent handling are the real costs; careless numeric conversion can permanently remove a leading zero or plus sign.

Common Mistakes

• Do not use type=number for telephone identifiers.
• Do not assume every region shares one length or prefix rule.
• Do not contact a number solely because a browser accepted it.

Connected lessons

• HTML number or text input: choose by the value, not its digits
• HTML autocomplete and inputmode: describe purpose and keyboard hints
• HTML form help: connect visible instructions and errors to a control