HTML forms

What you'll learn

• What the form element does for you the moment you submit
• Input types in 2026 — and what each gets you on mobile
• Labels, fieldsets, and the rules of association
• Built-in validation: required, pattern, min, max, minlength, maxlength
• The Constraint Validation API for custom error logic
• Autofill and the autocomplete token list
• File uploads: accept, multiple, capture
• The dialog element — modals you don't have to build
• Accessible error patterns: aria-describedby, focus management, live regions

1. 01
   The form element and submission

   action, method, enctype, target — what the browser does the second a user clicks submit, with no JavaScript at all.
   14 min
2. 02
   Input types in 2026

   text, email, tel, url, number, date, time, color, range, search — what each gets you on mobile and desktop.
   17 min
3. 03
   Labels and associations

   label for vs wrapping, fieldset and legend, aria-label as last resort.
   14 min
4. 04
   Built-in validation

   required, pattern, min, max, minlength, maxlength, and the :invalid and :valid pseudos.
   16 min
5. 05
   The Constraint Validation API

   setCustomValidity, checkValidity, reportValidity, and the :user-invalid pseudo.
   15 min
6. 06
   Autofill and autocomplete

   The autocomplete token list and why it matters for password managers and UX.
   13 min
7. 07
   File inputs and uploads

   input type=file, accept, multiple, capture, the File and FileList shape.
   15 min
8. 08
   The dialog element

   Modal vs non-modal, showModal, focus, ::backdrop, and forms that submit to close a dialog.
   17 min
9. 09
   Accessible error patterns

   aria-describedby, error summaries, focus management on submit, live regions for async errors.
   14 min