この記事は翻訳作業中です。

<input> 要素の submit 型は、ボタンとして描画されます。 click イベントが発生したとき (ふつうはユーザーがボタンをクリックしたとき)、ユーザーエージェントはサーバーへフォームを送信しようとします。

ボタンのラベルとして使用する DOMString
イベント click
対応している共通属性 type および value
IDL 属性 value
メソッド なし

<input type="submit"> 属性の value 属性は、ボタンのラベルとして表示される DOMString を示します。ボタンはその他の真の値を持ちません。

<input type="submit" value="Send Request">

value を指定しなかった場合、ボタンにはユーザーエージェントによって選ばれた既定のラベルが表示されます。このラベルは「送信」または「クエリを送信」などのものです。次のものはこのブラウザーにおける送信ボタンの既定のラベルです。

<input type="submit">

追加の属性

すべての <input> 型で共通する属性に加え、 submit 型の入力欄は次の属性にも対応しています。

属性 説明
formaction フォームのデータの送信先の URL。もしあれば、フォームの action 属性を上書きする
formenctype 文字列で、フォームのデータに使用するエンコーディング型を指定
formmethod フォームを送信する際に使用する HTTP メソッド ((get または post)
formnovalidate 論理属性で、存在する場合、サーバーにデータを送信する前にフォームのフィールドに制約の検証をしないことを示す
formtarget フォームを送信した後で、サーバーから返されるレスポンスを読み込む先の閲覧コンテキスト

formaction

文字列で、データの送信先の URL を示します。これはこの <input> が属する <form> 要素の action 属性より優先します。

この属性は <input type="image"> 要素でも使用できます。

formenctype

文字列で、フォームのデータをサーバーに送信する際に使われるエンコーディング方法を識別します。許されている値は3つです。

application/x-www-form-urlencoded
これは既定値で、フォームのデータを encodeURI() などのアルゴリズムを使って URL エンコーディングした後で送信します。
multipart/form-data
データを管理するために FormData API を使用し、複数のファイルをサーバーに送信することができます。フォームに <input> 要素の type=file (<input type="file">) が含まれている場合は、このエンコーディング型を使わなければなりません
text/plain
プレーンテキストです。ほとんどデバッグでしか役に立ちませんが、送信されたデータを簡単に見ることができます。

formenctype 属性が指定された場合、所属するフォームの action 属性を上書きします。

この属性は <input type="image"> 要素でも使用できます。

formmethod

A string indicating the HTTP method to use when submitting the form's data; this value overrides any method attribute given on the owning form. Permitted values are:

get
A URL is constructed by starting with the URL given by the formaction or action attribute, appending a question mark ("?") character, then appending the form's data, encoded as described by formenctype or the form's enctype attribute. This URL is then sent to the server using an HTTP get request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value.
post
The form's data is included in the body of the request that is sent to the URL given by the formaction or action attribute using an HTTP push request. This method supports complex data and file attachments.
dialog
This method is used to indicate that the button simply closes the dialog with which the input is associated, and does not transmit the form data at all.

この属性は <input type="image"> 要素でも使用できます。

formnovalidate

A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the novalidate attribute on the element's owning form.

この属性は <input type="image"> 要素でも使用できます。

formtarget

A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a browsing context (that is, a tab, window, or <iframe>. A value specified here overrides any target given by the target attribute on the <form> that owns this input.

In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:

_self
Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.
_blank
Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the user agent.
_parent
Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as _self.
_top
Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as _self.

この属性は <input type="image"> 要素でも使用できます。

submit ボタンの使用

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

If you choose to use <button> elements to create the buttons in your form, keep this in mind: if there's only one <button> inside the <form>, that button will be treated as the "submit" button. So you should be in the habit of expressly specifying which button is the submit button.

A simple submit button

We'll begin by creating a form with 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="Send">
  </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 gets sent to the server. In this instance, the string will be text=usertext, where "usertext" is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the <form>; 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. In order to avoid conflicts with the user agent's own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See accesskey for further details.

Here's the previous example with the s access key added:

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

For example, in Firefox for Mac, pressing Control-Option-S triggers the Send button, while Chrome on Windows uses Alt+S.

The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it's not a complete solution for accessibility purposes.

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 or btn.disabled = false.

See the <input type="button"> page for more ideas about enabling and disabling buttons.

Validation

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

We've included simple examples above. There isn't really anything more to say about submit buttons. There's a reason this kind of control is sometimes called a "simple button."

仕様書

仕様書 状態 備考
HTML Living Standard
<input type="submit"> の定義
現行の標準  
HTML5
<input type="submit"> の定義
勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1
補足
完全対応 1
補足
補足 Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.</button>
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.</button>
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, silverskyvicto
最終更新者: mfuji09,