CodesBeautify

HTML Telephone Input Generator

Build a phone field with a chosen number pattern, a mobile keypad hint and a visible format note.

Phone field HTMLinternational format
<label for="phone">Phone number</label>
<input type="tel" id="phone" name="phone" placeholder="+442079460958" pattern="\+[0-9]{6,15}" inputmode="tel" autocomplete="tel" aria-describedby="phone-hint">
<p id="phone-hint" class="hint">Use the E.164 form: a plus sign followed by 6 to 15 digits.</p>
Runs locally in your browser

About the HTML Telephone Input Generator

A telephone input does not validate anything by itself. The tel type exists mainly to raise the phone keypad on a touch device, and browsers accept any characters you type into it, letters included. Real checking comes from the pattern attribute, so this builder offers ready made patterns for E.164 international numbers, the North American 000-000-0000 layout, United Kingdom numbers beginning with zero, and a plain digits only rule.

Each pattern ships with a matching placeholder and a visible note linked through aria-describedby, because a rejected number with no explanation is one of the most common reasons people abandon a form halfway. Telling someone the expected shape before they start typing works far better than showing a red outline once they think they have finished, and the note is announced by screen readers as part of the field.

Be careful with strict patterns. Numbering plans vary wildly between countries, and a rule that fits your home market will lock out perfectly valid customers elsewhere, so the international option, which accepts a plus sign followed by 6 to 15 digits, is the safest default. Normalise and verify on the server rather than in the browser, and leave contact autofill enabled so saved details can fill the field in a single tap. For an address field instead, see the HTML URL Input Generator.

How to use

  1. Pick the format your audience will actually type.
  2. Keep the hint switched on so the expected shape is visible.
  3. Decide whether the field is required, and leave autofill on.
  4. Copy the field into your form and normalise the value server side.

Common questions

Does type tel validate the number?
No. It only hints at a numeric keypad. Any checking has to come from a pattern attribute or from your server.
Which pattern is safest internationally?
The E.164 form, a plus sign followed by 6 to 15 digits, since it covers every national numbering plan.
Why set inputmode as well as the type?
It tells the browser exactly which on screen keyboard to raise, which is more reliable than relying on the type alone.
Should I strip spaces and dashes?
Yes, on the server. Let people type the format they are used to and clean it up before storing.