Accessible error messages on submit
novalidate turns off the browser bubbles, but validity still works, so our code reuses the built-in rules and writes its own messages next to each field.
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
Focus moved to: email
email error: Enter an email like name@example.com.
phone error: This field is required.
All good: sending email=asha%40example.com&phone=9876543210