frontend-syntax-html5-form

name	frontend-syntax-html5-form
description	Use when authoring any HTML form, validating user input, wiring custom widgets into the form lifecycle, integrating password managers / autofill, or deciding between native and custom form controls. Prevents the most common form regressions in 2026 : `:invalid` red borders on empty load, `autocomplete="off"` killing password managers, `HTMLFormElement.submit()` silently bypassing validation, JS-rebuilt selects with no constraint validation, and ElementInternals widgets without `aria-errormessage` plumbing. Covers the complete 22-type `<input>` matrix with Baseline status, the `inputmode` token set, the full `autocomplete` token taxonomy, the Constraint Validation API (`ValidityState`, `setCustomValidity`, `checkValidity` vs `reportValidity`, `:invalid` vs `:user-invalid`, `requestSubmit`), form events (`submit` / `reset` / `formdata` / `invalid`), the FormData API, Open UI customizable controls (`appearance: base-select`, `<selectedcontent>`, gated Chromium-only with progressive-enhancement pattern), and Form-Associated Custom Elements via `ElementInternals` (Baseline since March 2023). Keywords: Constraint Validation, ValidityState, requestSubmit, :user-invalid, :invalid, formdata event, FormData, ElementInternals, attachInternals, formAssociated, setFormValue, setValidity, autocomplete, inputmode, base-select, selectedcontent, picker pseudo, label, fieldset, legend, aria-errormessage, aria-invalid, form wont submit, validation not showing, autofill not working, password manager missing, error message untranslated, mobile keyboard wrong, screen reader does not announce error, how to validate form, why is autofill not working, can I style a select, how to make an accessible form, how to show form errors.
license	MIT
compatibility	Designed for Claude Code. Requires Frontend Design evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

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 ?

Email address ?
  -> <input type="email" autocomplete="email" inputmode="email">
     (add multiple for csv lists)

Telephone (free format) ?
  -> <input type="tel" autocomplete="tel" inputmode="tel">
     (add pattern for strict format ; tel does NOT intrinsically validate)

Numeric identifier where leading zeros matter (postal code, SKU, OTP) ?
  -> <input type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="postal-code | one-time-code | off">
     (NEVER type="number" : it strips leading zeros, allows e+ exponent notation,
      and ships a spinner that is wrong on mobile)

Decimal currency ?
  -> <input type="text" inputmode="decimal" pattern="[0-9]+([.,][0-9]+)?">
     (manual parse on the server ; type="number" mangles "1,234.56")

Login password ?
  -> <input type="password" autocomplete="current-password">

New / change password ?
  -> <input type="password" autocomplete="new-password" minlength="...">
     (triggers strong-password generator in browsers)

One-time SMS code ?
  -> <input type="text" inputmode="numeric" autocomplete="one-time-code">
     (iOS / Android autofill the SMS code automatically)

Calendar date ?
  -> <input type="date">  (ISO 8601 wire format ; locale-dependent picker UI)

Color picker ?
  -> <input type="color">  (returns #rrggbb, no alpha)

File upload ?
  -> <input type="file" accept="..." multiple? capture?>

Boolean toggle ?
  -> <input type="checkbox" required?>

Single-of-N within a group ?
  -> <input type="radio" name="group">  inside <fieldset><legend>...

Dropdown ?
  -> <select> (native, universally accessible).
     Optionally opt into Chromium-only customization with
       select, ::picker(select) { appearance: base-select; }
     and a <selectedcontent> + <button> picker structure. ALWAYS write the
     markup so the standard <select> works first ; treat base-select as
     progressive enhancement.

Multi-line text ?
  -> <textarea maxlength="..." minlength="..." required?>

Fully custom widget (star rating, color wheel) ?
  -> custom element with `static formAssociated = true` and
     this.attachInternals() ; consume `setFormValue` + `setValidity`.
     Documentation : [[frontend-impl-web-components]].