Submit button outside a form

Default type attribute

Inside form element

The default type attribute value for an element in HTML depends on the context in which it is used.

If the <button> element is used within a <form> element and the type attribute is not explicitly specified, then the default value is submit. This means that clicking the button (or pressing enter) will submit the form data to the server.

1
<form action="example.php" method="post">
2
  <input type="text" name="username" />
3
  <button>Submit</button>
4
  <button type="submit">Second submit</button>
5
</form>

Outside form element

If the <button> element is used outside a <form> element, or the type attribute is explicitly set to button, then the button is considered a generic button with no default behavior.

1
<form action="example.php" method="post">
2
  <!--...-->
3
</form>
4

5
<button>Generic button</button>
6
<button type="button">Also generic button</button>

Submit button outside form

By setting the form attribute of form control to the id of a form element, you can associate the control with the form. This association allows the browser to collect the data entered in the control and submit it along with the data from the other controls in the form when the form is submitted.

1
<section>
2
  <header>
3
    <h2>Modal title</h2>
4
  </header>
5

6
  <form id="projectForm">
7
    <label for="organization">Organization</label>
8
    <input id="organization" type="text" autocomplete="off" />
9

10
    <label for="Project">Project</label>
11
    <input id="Project" type="text" autocomplete="off" />
12
  </form>
13

14
  <footer>
15
    <button form="projectForm" type="submit">Submit form</button>
16
  </footer>
17
</section>