Autocomplete and inputmode

Improve mobile UX with autocomplete and inputmode.

Autofill with autocomplete

To save users from typing the same thing again, use the autocomplete attribute. The browser remembers past values and fills matching fields automatically. Standard values like name, email, tel and postal-code work best.

To turn autofill off, set autocomplete="off"; but browsers may still override it.

Mobile keyboard with inputmode

On mobile devices the inputmode attribute opens the right keyboard. numeric shows the number pad, tel the phone pad, and email a keyboard with the @ sign ready.

inputmode only hints at the keyboard; it does not validate. For validation you need type or pattern. Using both together works best.

Exercise Write a mobile-friendly email field

Add an <input type="email"> to the form. Give it name of eposta, autocomplete of email, inputmode of email and the required attribute. Also set placeholder to Your email address.

Show example solution

<form>
  <input type="email" name="eposta" autocomplete="email" inputmode="email" required placeholder="Your email address">
</form>

Test yourself

Which statement is correct?
- autocomplete only accepts the value "off"
- inputmode gives a mobile keyboard hint
- inputmode validates the field
- autocomplete and inputmode are the same
Show answer

inputmode gives a mobile keyboard hint — Correct. inputmode opens the right keyboard on mobile; it does not validate.

Browser should autofill the email

<input type="email" ____="email">

Show answer

<input type="email" autocomplete="email">

Match each attribute and value to its role

autocomplete

Autofill
inputmode

Mobile keyboard hint
email

Email field
tel

Phone field
off

Turns autofill off

Next lesson: Summary - Survey form

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies