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 field
- tel
- Phone field
- off
- Turns autofill off