A submit button activates its associated form and asks the browser to send the form’s successful controls. The clearest syntax is an explicit button element with type=”submit”, a label, and, when needed, a name and value.

The examples below show a working form, the equivalent input syntax, and the data each control contributes when activated.

Submit button: create a complete HTML form

Place the button between the opening and closing form tags. Give the form an action URL and a method so the browser knows where and how to send the data.

Complete button example: <form action=”/signup” method=”post”> <label for=”email”>Email address</label> <input id=”email” name=”email” type=”email” required /> <button type=”submit”>Sign up</button> </form>

When the visitor activates “Sign up,” the browser sends the email field to /signup. With method=”post”, the data normally goes in the request body. With method=”get”, it is appended to the action URL as a query string.

Always write type=”submit” when the button is intended to submit the form. A button inside a form defaults to the submit behavior if its type is omitted, but an explicit type makes the intent clear and prevents accidental submissions when the form changes.

Compare an HTML submit button with an input control in complete forms

An HTML submit button can contain text and other permitted button content. Its visible label is the content between the opening and closing tags. An input submit control is a void element, so its label comes from the value attribute.

Complete button-element form: <form action=”/search” method=”get”> <label for=”term”>Search</label> <input id=”term” name=”q” type=”search” /> <button type=”submit”>Search the site</button> </form>

Complete input-element form: <form action=”/search” method=”get”> <label for=”term”>Search</label> <input id=”term” name=”q” type=”search” /> <input type=”submit” value=”Search the site” /> </form>

Both forms send the same search field, such as q=html. Use button when you need richer content or several distinct actions. Use input type=”submit” for a simple text-only control.

What a form submit button sends: name, value, and disabled state

A form submit button sends its own name-value pair only when it has a name, a value, and is the button that activated the form. The button’s visible text is not submitted automatically.

<form action=”/orders” method=”post”> <input name=”order_id” value=”4821″ /> <button type=”submit” name=”action” value=”save”>Save order</button> <button type=”submit” name=”action” value=”preview”>Preview order</button> </form>

If “Save order” is activated, the request includes order_id=4821 and action=save. If “Preview order” is activated, the action value is preview instead. This lets the server distinguish multiple actions in one form.

A disabled form submit button cannot be activated and does not contribute its name or value to submitted data. The disabled attribute is useful when an action is temporarily unavailable: <button type=”submit” name=”action” value=”delete” disabled>Delete order</button>. A disabled field elsewhere in the form is also omitted from the request.

Choose a button with type=”submit” or type=”button”, inside or outside a form

Use type=”button” for a control that should not submit the form, such as a button that opens a panel, adds a row, or runs client-side behavior. Without that type, a button inside the form is a submit control by default.

<form action=”/profile” method=”post”> <input name=”display_name” /> <button type=”button”>Show character count</button> <button type=”submit”>Save profile</button> </form>

The first button does not submit; the second does. A button outside the form can still be associated with it through the form attribute, whose value must match the form’s id.

<form id=”profile-form” action=”/profile” method=”post”> <input name=”display_name” /> </form> <button type=”submit” form=”profile-form” name=”action” value=”save”>Save profile</button>

This outside button submits profile-form and contributes action=save. The form attribute is useful when layout requirements place the controls alongside, rather than inside, the form.