HTML Telephone Input Generator
Configure a telephone input — pattern, autocomplete, length limits, and states — and copy the ready-to-use HTML with live preview.
Last updated: May 21, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is HTML Telephone Input Generator?
The HTML `<input type="tel">` element is designed for telephone number entry. Unlike `type="number"`, it accepts any character including `+`, `-`, spaces, and parentheses — because phone number formats vary widely by country.
On mobile devices, `type="tel"` triggers a numeric keypad optimised for phone numbers. The `pattern` attribute enforces a specific format via regex: e.g. `[0-9]{10}` for a 10-digit number. The `autocomplete` attribute can be set to `tel`, `tel-national`, or `tel-local` to match browser autofill categories.
How to Use HTML Telephone Input Generator
Enter the label text and configure id/name
Set placeholder text (e.g. +1 (555) 000-0000)
Add a pattern regex to enforce a phone number format
Set maxlength and autocomplete
Toggle required, disabled, or readonly
Copy the generated HTML
Common Use Cases
- Form authors adding contact phone number fields to checkout or registration forms.
- Developers building international phone number inputs with country-specific patterns.
- Teams adding mobile-optimised numeric keypads to web forms.
Example Input and Output
A required 10-digit US phone number input.
Label: Phone number
id: phone, Placeholder: (555) 000-0000
Pattern: [0-9]{10}, Required: true<label for="phone">Phone number</label>
<input type="tel" id="phone" name="phone" placeholder="(555) 000-0000" pattern="[0-9]{10}" autocomplete="tel" required>Privacy
All HTML generation runs in your browser. No data is sent to any server.