<input type="submit">

<input> elements of type "submit" are rendered as submit buttons — clicking one will attempt to submit the form to the sever.

<input type="submit" value="Submit to me">

Value

An <input type="submit"> elements' value attribute contains a DOMString that is used as the button's label.

<input type="submit" value="Submit to me">

If you don't specify a value, you get an button with a default label like Submit/Submit Query (depending on the browser):

<input type="submit">

Using submit buttons

<input type="submit"> buttons are used to submit forms. If you want to create a custom button and then customize the behaviour using JavaScript, you need to use <input type="button">, or better still, a <button> element.

You do however need to bear in mind that if you only include a single button element inside a form (e.g. <button>My button</button>), the browser will count this as the submit button. You need to explicitly declare a submit button in addition to any other buttons you may want to include.

A simple submit button

We'll begin by creating a simple submit button:

<form> 
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Submit to me">
  </div>
</form>

This renders like so:

Try entering some text into the text field, and then submitting the form.

Upon submitting, the data name/value pair sent to the server in this case will be along the lines of text=mytext, depending on what text you entered into the text field. Where and how the data is submitted depends on how you set the <form> attributes (and other details) up — see Sending form data for more details.

Adding a submit keyboard shortcut

Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.

In this example, s is specified as the access key (you'll need to press s plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those).

<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Submit to me"
     accesskey="s">
  </div>
</form>

Disabling and enabling a submit button

To disable a submit button, simply specify the disabled global attribute on it, like so:

<input type="submit" value="Disabled" disabled>

You can enable and disable buttons at run time by simply setting disabled to true or false; in JavaScript this looks like btn.disabled = true.

Validation

Submit buttons don't participate in constraint validation; they have no real value to be constrained.

Examples

We've included simple examples above. There isn't really anything more to say about submit buttons. 

Specifications

Browser compatibility

See also

• <input> and the HTMLInputElement interface which implements it.
• The <button> element.