Autofill tokens, keyboards and Enter keys
Open this page on a phone to see each keyboard. The 16px font size stops iPhones from zooming in when a field is focused.
Good forms ask for little, label everything, let the browser autofill with autocomplete tokens, show the right phone keyboard with inputmode and enterkeyhint, and explain errors next to the field in words a person can act on.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a delivery address form (name, street address, city, PIN code, phone) with the right autocomplete tokens and keyboards.
Write a password field for a sign-up form with a visible rule hint linked by aria-describedby and the token that lets browsers suggest a strong password.
Explain it without notes
What does the autocomplete attribute do, and why does using the right token matter?
What's the difference between type, inputmode and enterkeyhint?
Describe how to show an accessible error message for one field.
Give five ways to make a form easier to fill in.
Preview
Console
Nothing logged yet.Expected console output
name | autocomplete: name | keyboard: (from type) | enter: (default)
email | autocomplete: email | keyboard: (from type) | enter: (default)
pw | autocomplete: new-password | keyboard: (from type) | enter: (default)
otp | autocomplete: one-time-code | keyboard: numeric | enter: done
zip | autocomplete: postal-code | keyboard: numeric | enter: next
q | autocomplete: (none) | keyboard: (from type) | enter: search