Don't suggest replacing numeric input with telephone input

[RichardD2]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling

What specific section or headline is this issue about?

Date input types : note

What information was incorrect, unhelpful, or incomplete?

The note in this section suggests replacing <input type="number"> with <input type="tel"> to get the numeric keypad on mobile devices.

Note: It is worth mentioning <input type="number"> here too — this also has a spinner that you can use to increment/decrement values, so potentially suffers from the same problem. However, in the case of the number type the data being collected is simpler, and it is easy to just use a tel input type instead, which has the appearance of text, but displays the numeric keypad in devices with touch keyboards.

However, unlike an <input type="number">, an <input type="tel"> will not validate that the entered value is numeric:

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.

What did you expect to see?

If the concern is to remove the spinner, then there is a CSS solution for that:

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

input[type=number] {
    appearance: textfield;
}

And if you want a non-numeric input that shows the numeric keypad on mobile devices, it would be better to use the inputmode attribute:

<input type="text" inputmode="decimal">
<input type="text" inputmode="numeric">

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/learn_web_development/extensions/forms/advanced_form_styling
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md
• Last commit: 2b4a2ad
• Document last modified: 2025-12-19T19:59:21.000Z

[Josh-Cena]

Any reason you do want to validate that the telephone number is a number? What about dashes, spaces, or area codes with +? Using a different input type when one with the precise semantics you want seems like an antipattern in itself.

[RichardD2]

That's not the point. The MDN document linked suggests replacing a number input with a telephone input just to get rid of the spinners.

[Josh-Cena]

I see yeah, that suggestion doesn't make sense. Thanks!

[AhamadAlii]

Since this is now agreed to be misleading, I’d like to suggest a concrete fix for the note.

Instead of recommending type="tel" as a replacement for type="number" (which changes semantics and validation), the note could point to:

• using CSS to remove the spinner when appearance is the concern, and

• using inputmode="numeric" / inputmode="decimal" when the goal is to show a numeric keypad on touch devices.

This keeps semantics and validation intact while addressing the original UI concern.

I’m happy to open a PR with this wording if that helps.