HTML form ownership: connect an external submit button deliberately

Use it for a real task

A sticky action bar may sit after the main form in the DOM so it is reached after the fields. Giving the submit button form=review-form associates it with the correct form. This is an HTML relationship, not a CSS relationship. If a page has several forms, explicit ownership prevents a button from submitting whichever form happens to enclose it after a layout change.

<form id="review-form" action="/receipts/review" method="post">
  <label for="decision-note">Decision note</label>
  <textarea id="decision-note" name="note" required></textarea>
</form>
<section aria-label="Review action">
  <button type="submit" form="review-form">Submit review</button>
</section>

What the markup guarantees

The service endpoint still authenticates the reviewer and validates note length. The form attribute only selects which controls participate in native submission; it does not create a server handler or move the button into the form's DOM subtree.

Cost and limits

This avoids a JavaScript submit proxy and its event and focus edge cases. The price is maintaining one unique form id and verifying that future refactors do not separate the button from its intended task order.

Common Mistakes

• Do not use an id that appears on several forms.
• Do not set type=button when native submission is intended.
• Do not assume visual adjacency determines form ownership.

Connected lessons

• HTML forms: choose GET for retrieval and POST for a state change
• HTML labels: bind each control to a durable accessible name
• HTML focus order: use native controls and keep DOM order usable