The Telephone Input (type="tel")

Technical Deep Dive & Specifications

The Spec Rule: Why type="tel" Does Not Validate by Default

Unlike type="email" or type="url", an <input type="tel"> with no pattern attribute will consider any text string valid—even "Call Mom!" or "N/A".

const telInput = document.querySelector('input[type="tel"]');
telInput.value = "random text string";

console.log(telInput.validity.valid); // true
console.log(telInput.validity.typeMismatch); // undefined / false (No typeMismatch for tel!)

To enforce formatting constraints, you must explicitly pair type="tel" with a regular expression via the pattern attribute.

The Fatal Trap: Never Use type="number" for Phone Numbers!

Junior developers often mistakenly use <input type="number"> because phone numbers consist primarily of digits. This causes severe engineering defects:

+-------------------------------------------------------------------------------+
|                     WHY type="number" BREAKS PHONE NUMBERS                    |
+-------------------------------------------------------------------------------+
| 1. STRIPS LEADING ZEROS:  User types "0208123456" -> Browser sends "208123456"|
| 2. DISALLOWS CHARACTERS:  Rejects "+", "(", ")", "-", and spaces entirely.    |
| 3. INTRUSIVE UI:          Renders unwanted up/down increment stepper arrows.  |
| 4. SCROLL WHEEL BUG:      Accidental mouse scroll mutates the phone digits.   |
| 5. SCIENTIFIC NOTATION:   Numbers exceeding 16 digits switch to "1.234e+16".  |
+-------------------------------------------------------------------------------+

Rule of Thumb: If you cannot perform meaningful mathematical addition or subtraction on the value (e.g., phone numbers, credit cards, zip codes, social security numbers), never use type="number". Always use <input type="tel"> or <input type="text" inputmode="numeric">.

Mobile Keyboard Optimization: The 10-Key Dialpad

Setting type="tel" prompts mobile operating systems to replace the standard QWERTY keyboard with a high-efficiency numeric dialpad:

+-------------------------------------------------------------+
|        [  1  ]           [  2 ABC  ]         [  3 DEF  ]    |
|        [ 4 GHI ]         [  5 JKL  ]         [  6 MNO  ]    |
|        [ 7 PQRS ]        [  8 TUV  ]         [  9 WXYZ ]    |
|        [  + * # ]        [    0    ]         [    ⌫    ]    |
+-------------------------------------------------------------+

Companion Autocomplete Tokens for Telephony

The HTML standard defines dedicated tokens for the autocomplete attribute to accelerate mobile checkout and registration flows:

Standard Telephony Regex Patterns

1. Strict International Standard (ITU-T E.164)

The ITU-T E.164 recommendation formats international numbers as a leading + followed by up to 15 digits with no spaces or punctuation:

<input 
  type="tel" 
  name="e164_phone" 
  pattern="^\+[1-9]\d{1,14}$"
  title="Please enter a valid international phone number in E.164 format (e.g., +14155550199)"
  placeholder="+14155550199"
  required
>

2. Flexible North American Numbering Plan (NANP / US & Canada)

Accepts standard formats: (555) 123-4567, 555-123-4567, 5551234567, or +1 555 123 4567:

<input 
  type="tel" 
  name="us_phone" 
  pattern="^(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})$"
  title="Please enter a 10-digit North American phone number (e.g. 555-123-4567)"
  placeholder="(555) 123-4567"
>

Input Type vs Inputmode Matrix

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 105–113: The country selector uses autocomplete="tel-country-code", allowing modern autofill engines to match and select the user's localized country calling code.
• Lines 116–126: The primary subscriber phone input uses type="tel" and autocomplete="tel-national". It enforces a flexible regex pattern ^[0-9\s\(\)\-\.]{7,15}$ allowing national punctuation without locking the user into a single country's format.
• Lines 131–142: The backup phone input demonstrates a strict E.164 pattern (^\+[1-9]\d{7,14}$). It requires a leading + symbol followed by the country code and digits with no spaces.
• Lines 73–80: CSS :user-invalid automatically highlights formatting mismatches without firing prematurely on initial render.

Expected Browser Render Output

+-------------------------------------------------------------+
| Security Verification                                       |
| Link your mobile device for Two-Factor Authentication (2FA) |
|                                                             |
| Country & Primary Phone Number *                            |
| [ 🇺🇸 +1 (US/CA) v ] [ 415-555-0199                        ] |
| We will transmit a 6-digit SMS verification token.          |
|                                                             |
| Emergency International Backup (Optional)                   |
| [ +14155550199                                            ] |
| Must begin with '+' followed by country code and digits.    |
|                                                             |
| [               Transmit Verification Code                ] |
+-------------------------------------------------------------+