Using tel for numbers

Pattern Checker

What does this mean?

It appears that an input is using type="tel" when it is not asking for a telephone number.

This is normally done to have a touch-screen device present a number keypad to the user instead of the standard keyboard.

For example:

<label for="cc">Card number</label>
<input type="tel" id="cc">

This used to be seen especially on date fields within government services.

Impact on users

Typically this doesn't have any impact on a user (beyond not being semantically correct), but is often a sign that a better solution is not being used.

How to fix

If the field is asking for a non-telephone input, then look at using inputmode instead as this will direct the browser to present the correct keyboard to the user. The best match normally be inputmode="numeric". Avoid using inputmode="decimal" as this can prevent users entering the correct data.

For example:

<label for="cc">Card number</label>
<input type="text" id="cc" inputmode="numeric">

Classification

Level: warn
Tagged: best-practice

See all issues