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

値

<input type="submit"> 要素のvalue 属性は、ボタンのラベルとして表示される文字列を示します。ボタンはその他の真の値を持ちません。value はボタンのアクセシブル説明を指定します。

value 属性の設定

<input type="submit" value="リクエストを送信" />

value 属性の省略

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

<input type="submit" />

追加の属性

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

formaction

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

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

formenctype

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

application/x-www-form-urlencoded

これは既定値で、フォームのデータをencodeURI() などのアルゴリズムを使ってテキストをパーセントエンコーディングした後のテキストとして送信します。

multipart/form-data

データを管理するためにFormData API を使用し、複数のファイルをサーバーに送信することができます。フォームに<input> 要素のtype がfile (<input type="file">) が含まれている場合は、このエンコーディング型を使わなければなりません。

text/plain

プレーンテキストです。ほとんどデバッグでしか役に立ちませんが、送信されたデータを簡単に見ることができます。

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

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

formmethod

文字列で、フォームのデータを送信するときに使用する HTTP メソッドを示します。この値は所有者であるフォームのmethod を上書きします。許可されている値は次の通りです。

get

URL はformaction またはaction 属性で指定された URL に疑問符 ("?") を追加し、formenctype またはenctype 属性で指定された方法でエンコードされたフォームのデータが続くものになります。この URL は HTTP のGET リクエストを用いてサーバーに送信されます。このメソッドはASCII 文字のみを含むフォームでうまく動作し、副作用はありません。これが既定値です。

post

フォームのデータは、formaction またはaction で指定された URL に HTTP のPOST メソッドを用いて送信されるリクエストの本文に含められます。このメソッドは複雑なデータやファイルの添付に対応しています。

dialog

このメソッドは、入力欄が関連付けられたダイアログを閉じるだけで、フォームのデータをまったく送信しない場合ことを表すために使用します。

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

formnovalidate

論理属性で、存在する場合は、サーバーに送信する前にフォームの検証を行わないことを指定します。これは、自分自身で形成するフォームのnovalidate 属性の値より優先されます。

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

formtarget

フォームを送信した後に受け取ったレスポンスを表示する場所を示す名前またはキーワードを指定する文字列です。この文字列は、閲覧コンテキスト（つまり、タブ、ウィンドウ、または<iframe>）の名前である必要があります。ここで指定された値は、この入力を所有している<form> のtarget 属性で指定された対象を上書きします。

タブ、ウィンドウ、インラインフレームなどの実際の名前の他に、使用できる特別なキーワードがいくつかあります。

_self

レスポンスを、形式を形成しているのと同じ閲覧コンテキストに読み込みます。これにより、現在の文書が受信したデータで置き換わります。これは、何も指定されなかった場合に使用される既定値です。

_blank

レスポンスを新しい、名前のない、閲覧コンテキストに読み込みます。これは通常、現在の文書内の同じウィンドウの新しいタブですが、ユーザーエージェントの設定によって異なる形となる場合があります。

_parent

現在の閲覧コンテキストの親コンテキストにレスポンスを読み込みます。親コンテキストがない場合は、_self と同じ動作をします。

_top

レスポンスを最上位の閲覧コンテキストに読み込みます。これは、現在のコンテキストの最上位の祖先である閲覧コンテキストです。現在のコンテキストが最上位のコンテキストである場合、これは_self と同じように動作します。

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

submit ボタンの使用

<input type="submit"> ボタンはフォームを送信するために使用されます。もしカスタムボタンを作成し、JavaScript で動作をカスタマイズしたい場合は、<input type="button"> か、より好ましくは<button> 要素を使用しなければいけません。

もしフォームのボタンを作成するのに<button> 要素を使用するのであれば、次のことに注意してください。<button> が<form> の中にある場合、そのボタンは "submit" ボタンとして扱われます。ですから、どのボタンが送信ボタンであるかを明示的に指定する習慣をつけるとよいでしょう。

基本的な送信ボタン

まず、基本的な送信ボタンを持つフォームを作成することから始めます。

<form>  <div>    <label for="example">テキストを送信してみましょう</label>    <input type="text" name="text" />  </div>  <div>    <input type="submit" value="送信" />  </div></form>

次のように表示されます。

テキストフィールドにいくらかテキストを入力してから、送信ボタンを押してみてください。

送信すると、データの名前と値のペアがサーバーに送信されます。この例では、文字列はtext=usertext となります。"usertext" はユーザーが入力したテキストで、特殊文字を保持するためにエンコードされています。どこでどのようにデータを送信するかは<form> の設定によります。詳しくはフォームデータの送信を参照してください。

送信ボタンへのキーボードショートカットの追加

キーボードショートカットは、アクセスキーやキーボード相当物とも呼ばれ、ユーザーがキーボードのキーまたはキーの組み合わせを使ってボタンを発生させることができます。送信ボタンにキーボードショートカットを追加するには、それが意味をなす他の<input> と同じように、accesskey グローバル属性を使用してください。

この例では、s がアクセスキーとして指定されています（s と、あなたのブラウザー/OS の組み合わせに応じた特定の修飾キーを押す必要があります）。ユーザーエージェント自身のキーボードショートカットとの競合を避けるために、ホストコンピューター上の他のショートカットとは異なる修飾キーがアクセスキーに使用されます。詳しくはaccesskey を参照してください。

以下は、前回の例にs アクセスキーを追加した例です。

<form>  <div>    <label for="example">テキストを送信してみましょう</label>    <input type="text" name="text" />  </div>  <div>    <input type="submit" value="送信" accesskey="s" />  </div></form>

例えば、 Mac 版 Firefox ではControl-Option-S を押すと送信ボタンを起動しますが、Windows 版 Chrome ではAlt+S を使用します。

上の例の問題点は、ユーザーがアクセスキーが何であるかを知らないということです。 特に、競合を避けるために変更する修飾子は通常標準的でないため、このようなことが起こります。サイトを構築する際には、サイトのデザインを邪魔しないような方法でこの情報を提供するようにしてください（例えば、サイトのアクセスキーが何であるかについての情報を指し示す、簡単にアクセスできるリンクを提供する）。ボタンにツールチップを追加する（title 属性を使用する）こともできますが、アクセシビリティの観点からは完全な解決策とは言えません。

送信ボタンの無効化と有効化

送信ボタンを無効にするには、disabled 属性を、次のように指定してください。

<input type="submit" value="送信" disabled />

実行時にdisabled をtrue またはfalse に設定することで、ボタンを有効にしたり無効にしたりすることができます。JavaScript では、btn.disabled = true またはbtn.disabled = false のようになります。

検証

送信ボタンは制約の検証には参加しません。制約を受ける実際の値を持っていません。

例

上に基本的な例を記載しています。送信ボタンについては、実のところこれ以上言うべきことはありません。この種のコントロールが「単純なボタン」と呼ばれることがあるのはそのためです。

技術的概要

仕様書

ブラウザーの互換性

関連情報

• <input> およびそれが実装しているHTMLInputElement インターフェイス
• フォームとボタン
• HTML フォーム
• <button> 要素