Read more

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

Dominik Schöler
July 07, 2023Software engineer at makandra GmbH

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!

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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.

Posted by Dominik Schöler to makandra dev (2023-07-07 07:42)