Frontend Syntax : HTML5 Form

This skill is the operational reference for HTML form authoring in 2026. It covers the complete native input type matrix, the Constraint Validation API, the submission lifecycle (submit / reset / formdata / invalid), the FormData API, the Open UI customizable controls, and Form-Associated Custom Elements via ElementInternals. The skill does NOT cover framework form libraries, opinionated UI kits, or server-side validation; consult those toolchains directly.

Quick Reference

Floor rules

• ALWAYS pair every interactive form control with a <label> (explicit for/id preferred over implicit nesting).
• ALWAYS set a correct autocomplete token on every autofillable field. WCAG 2.2 SC 1.3.5 (Identify Input Purpose) requires it for personal-data fields.
• ALWAYS use :user-invalid for visible error styling. NEVER use bare :invalid for that purpose.
• ALWAYS call form.requestSubmit(submitter?) to submit programmatically. NEVER call HTMLFormElement.submit() (it bypasses validation and skips the submit and formdata events).
• ALWAYS reflect domain-specific errors into the Constraint Validation API via setCustomValidity(message) (for native controls) or internals.setValidity(flags, message, anchor?) (for form-associated custom elements).
• ALWAYS pair aria-invalid="true" with aria-errormessage="<id>" for error messages. The referenced element MUST be in the DOM and visible while the field is invalid.

Decision tree 1 : Which input type for which data ?