The form Attribute

Associate inputs and buttons with a form using the form attribute, even when they are outside the <form> element.

Overview

By default, form controls (inputs, buttons, select, textarea) must be physical children of the <form> element they belong to. The form attribute breaks this constraint it lets you place controls anywhere in the DOM and still associate them with a specific form via the form's id. This is extremely useful for: - Sticky toolbars with Save/Cancel buttons outside the form - Multi-column layouts where inputs and their form are in different DOM positions - Accessibility patterns where visual placement differs from semantic placement - Dialog footers with form submission buttons Syntax: <input form="form-id"> the value must match the target <form>'s id.

Key Points

•form="formId" associates a control with any form on the page by id
•The control behaves as if it were physically inside the referenced form
•Works on input, button, select, textarea, fieldset, object
•A button with form="formId" type="submit" submits that form from anywhere
•The control's name/value is included in the form's submission
•Only one form can be referenced; form="" (empty) disassociates from the ancestor form

Examples

Submit button in a dialog footer outside the form

<!-- Form is inside a dialog body -->
<dialog id="edit-dialog">
  <form id="edit-form" method="dialog">
    <label for="username">Username</label>
    <input type="text" id="username" name="username">
  </form>

  <!-- Footer is OUTSIDE the form DOM, but button is associated via form attribute -->
  <footer class="dialog-footer">
    <button type="button">Cancel</button>
    <button type="submit" form="edit-form">Save Changes</button>
  </footer>
</dialog>

The Save button submits edit-form even though it's outside the <form> element.

Sticky action bar with form controls

<!-- The actual form -->
<form id="product-form" action="/products" method="POST">
  <section>
    <label>Product Name</label>
    <input type="text" name="name" required>
  </section>
  <section>
    <label>Price ($)</label>
    <input type="number" name="price" min="0" step="0.01" required>
  </section>
  <!-- No submit button here -->
</form>

<!-- Sticky toolbar at the bottom of the viewport -->
<div class="sticky-toolbar">
  <span id="status">Unsaved changes</span>
  <button type="reset" form="product-form">Discard</button>
  <button type="submit" form="product-form">Save Product</button>
</div>

Input outside its form

<form id="search-form" action="/search" method="GET">
  <button type="submit">Search</button>
</form>

<!-- Input is below the form in the DOM but still belongs to it -->
<input type="text" name="q" form="search-form" placeholder="Search...">

Common Mistakes

Using a form id that doesn't exist the control is then associated with no form
Using the form attribute inside an already-descendant input redundant but harmless
Forgetting that the associated form's action and method still control submission

Note

The form attribute is especially powerful in component-based UIs where a modal's action buttons are in the modal footer (outside the scrollable form area). It keeps the form markup clean while placing buttons where users expect them.

The form Attribute

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does the form attribute on an <input> do?