Better HTML forms: use type, inputmode, enterkeyhint and autocomplete

Posted . Visible to the public.

Web forms can be made much more usable with a few HTML attributes. Short summary:

  • type Show archive.org snapshot : Tells browsers about the input data type. Mobile browsers will select a virtual keyboard based on this value. Some browsers will add simple validation, e.g. for type email.
  • inputmode Show archive.org snapshot : Direct hint about the virtual keyboard to use. Inferred from type, but can be very handy when used explicitly:
    • Combining type="text" with inputmode="numeric" will start with a numeric virtual keyboard, but still allow other characters.
    • Combining type="text" with inputmode="numeric" will not show number increment/decrement buttons on desktop.
    • Combining inputmode="numeric" with pattern="[0-9]" offers a numbers-only keyboard.
  • enterkeyhint Show archive.org snapshot : Change the label of the "enter" button on virtual keyboards, e.g. next, go, search.
  • autocomplete Show archive.org snapshot : By marking input fields with their expected input (e.g. username, email, current-password, cc-number), browsers can offer a better autocomplete experience. There's a host of possible values.

Try it live!

Better Mobile Inputs Show archive.org snapshot offers an interactive editor for type, inputmode and autocomplete – including a live preview for iOS and Android! It also serves as a nice reference for available values.

Dominik Schöler
Last edit
Dominik Schöler
License
Source code in this card is licensed under the MIT License.
Posted by Dominik Schöler to makandra dev (2023-07-07 05:42)