v156 · :navigation-source · forms

Form submit feedback

A form navigation has two interesting elements: the form, and the button that actually submitted it. The spec lets :navigation-source match both cases — form:navigation-source for the whole form, button:navigation-source for the specific submitter. Two submit buttons below make the difference visible: only the one you press spins.

Submit something slow

Draft post

Submission log

  1. Nothing submitted yet.

The rule

/* From the spec's own example: form and submitter both selectable. */
form:navigation-source           { border-color: green; }
button:navigation-source         { background: green; color: white; }
button:navigation-source::after  { animation: spin 0.7s linear infinite; }

The double-submit problem, solved declaratively: while the submission's navigation is ongoing, the fired button is visibly busy — and because matching ends when the navigation settles, there is no "re-enable the button" code to forget. (Guidance note: disable a submit button only after a valid submission is under way, never to block validation.)

see also