HTML telephone input: flexible patterns for real numbers
The HTML <input type="tel"> collects telephone numbers. Unlike type="email" or url, the browser does not enforce a fixed format, because phone numbers vary widely across countries and use cases (extensions, country codes, service numbers). This flexibility is useful, but it shifts responsibility to your design: provide a clear label, an example placeholder, and—only when appropriate—a pattern that matches your audience.
Designing for international input
Decide first whether you need a global number or a domestic format. If you support international customers, allow a leading plus sign and spaces or dashes for readability (e.g., +1 212‑555‑0100). Don’t over‑restrict with a strict regex; real numbers contain country codes, varying lengths, and optional extensions. A lenient pattern such as ^\+?[0-9\-() ]+$ may help, but server‑side parsing is essential for normalization.
Keyboard & inputmode
Most mobile browsers show a dial‑friendly keyboard for type="tel". To reinforce that hint, you can add inputmode="tel". Keep the type as tel (not text) so assistive technologies announce the field correctly.
Labeling & helper text
- Use a visible label like “Phone” or “Mobile number”.
- Show an example format in placeholder or helper text.
- If you collect country code separately, make fields adjacent and clearly labeled.
Validation & normalization
Validate lightly on the client; accept digits, spaces, dashes, parentheses, and a leading plus. On the server, strip formatting, detect country, and store numbers in a canonical form (e.g., E.164) so they compare and dial reliably.
Privacy & security
Telephone numbers are sensitive. Avoid displaying them in URLs, redact in logs where possible, and confirm ownership via SMS only when necessary.
Copy‑ready patterns
- Basic phone: label + example placeholder +
inputmode="tel". - International phone: allow
+, add country selector, store in E.164. - Support callback: optional extension field with helper text.
By treating phone numbers as flexible user input—guided by good labels and examples, validated gently, and normalized server‑side—you’ll collect data that’s both user‑friendly and operationally reliable.