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!

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get: