Controls that live outside the form in HTML

A button does not have to sit inside the form it submits.

<form id="post-editor" action="/posts" method="post">
  <label for="body">Body</label>
  <textarea id="body" name="body" rows="4"></textarea>
</form>

<footer>
  <button type="submit" form="post-editor">Publish</button>
  <button type="submit" form="post-editor" formaction="/drafts"
          formnovalidate>Save draft</button>
  <button type="reset" form="post-editor">Clear</button>
</footer>

How it works

1. form="id" associates any control with a form anywhere on the page.
2. formaction and formmethod let one button post somewhere else.
3. formnovalidate skips validation, which is what a Save draft needs.

The run, in numbers

Lines

11

Characters to type

375

Tokens

96

Three-star pace

65 tpm

At the three-star pace of 65 tokens a minute, this run takes about 89 seconds.

Type this snippet

Step 3 of 3 in A form, step 3 of 25 in Forms & inputs.

← Previous Next →