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

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.