Display the right type of keyboard for form inputs

A common issue with form inputs on mobile devices is that the wrong keyboard is displayed, making it harder for users to fill out the form. For example, a numeric keyboard should be shown for a phone number input, but a regular keyboard is displayed instead. This can be frustrating for users and can lead to incorrect input.

Luckily, HTML has a built-in solution for this, via the inputmode attribute. This attribute allows you to specify the type of keyboard that should be displayed for an input field. Here's how you can use it:

<label>
  Phone number: <input type="tel" inputmode="tel" />
</label>

In this example, the inputmode="tel" attribute tells the browser to display a telephone keypad for the input field, making it easier for users to enter a phone number. Here's all the possible values for the inputmode attribute:

• none: No virtual keyboard is shown.
• text: A regular keyboard is shown.
• url: A URL keyboard is shown (includes keys like .com and /).
• email: An email keyboard is shown (includes keys like @ and .).
• tel: A telephone keypad is shown.
• search: A search keyboard is shown (includes a Go button).
• numeric: A numeric keyboard is shown.
• decimal: A numeric keyboard with a decimal point is shown.