Why does the input field allow alphabetic characters and not restrict the input to only numbers?

<input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}">

Why does the input field allow alphabetic characters and not restrict the input to only numbers?

<input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}">

• javascript
• html
• validation
• input

• 3 type=tel is only used to bring up the numpad on supported devices and browsers. It does not perform any validation / restriction on user input – Manos Kounelakis Commented Sep 25, 2021 at 19:45
• Maybe for country code (+44) and area code (444) syntax. – HelpingHand Commented Sep 25, 2021 at 19:45
• 1 It's all explained in the documentation. – Andy Commented Sep 25, 2021 at 19:45

3 Answers 3

It does not restrict the types of characters that can be input, but browsers will prevent submission if the input value does not match your pattern.

If you do not want to allow certain character inputs, you can use JavaScript to remove those characters: onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');".

input:invalid {
    color: red;
}

<form>
    <input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}" onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');">
    <input type="submit" value="Submit">
</form>

https://developer.mozilla/en-US/docs/Web/HTML/Element/input/tel

Andy's link to the documentation had the answer I was looking for.

the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world

Because many country use char in the phone numbers like ’+-()’ space etc.