Why does input[type='tel'] allow non-numerical characters to be entered?

Question

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}">

Answer 1

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>