A user-friendly setup for number-only inputs with plain HTML
Number-only inputs aren't as straightforward as you might expect. Most people would instinctively reach for the type="number" attribute, but it might not be enough. Sure, it shows a numeric keyboard on mobile, but allows users to enter non-numeric characters. Plus, the up and down arrows on desktop are not particularly useful for entering, say, a PIN code or a credit card number.
Instead, we can use inputmode="numeric". This ensures that the mobile keyboard is numeric-only, not even including some symbols that were available. We should also add pattern="[0-9]+" to constrain the input value. And, as far as the type attribute is concerned, that's up to you. Either type="text" or type="number" will work just fine.
<label> PIN code <input type="text" inputmode="numeric" pattern="[0-9]+"" /> </label>
Most browsers don't bother validating that the input is numeric-only, even for type="number". This, in combination with numeric inputs often accepting scientific notation (e.g. 1e3), means that you'll need to write some validation logic yourself.
