<input type="submit"> 属性値

値

<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 id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="送信" />
  </div>
</form>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

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

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

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

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

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

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

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

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

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

例えば、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> 要素