web-dev-qa-db-ja.com

<input type = 'button' />と<input type = 'submit' />の違い

馬鹿げた質問のようなものはないので、ここに行きます:<input type='button' /><input type='submit' />の違いは何ですか?

210
bounav

<input type="button" />ボタンはフォームを送信しません-デフォルトでは何もしません。通常、AJAXアプリケーションの一部としてJavaScriptと組み合わせて使用​​されます。

<input type="submit">ボタンは、ユーザーがJavaScriptで特に指定しない限り、ユーザーがボタンをクリックしたときにフォームを送信します。

219
user7094

「ボタン」とは、Javascriptを使用して機能を追加できるボタンです。 「submit」入力タイプには、配置されたフォームを送信するデフォルトの機能があります(もちろん、Javascriptを使用して追加機能を追加できます)。

17
Aistina

ボタンはそれ自体ではフォームを送信しません。javascriptを使用して何らかの操作を実行するために使用される単純なボタンですが、送信はユーザーが送信ボタンをクリックするたびにデフォルトでフォームを送信する一種のボタンです。

6

Type = "submit"の名前付き入力も、他のフォームの名前付きフィールドと一緒に送信されますが、名前付き入力type = "button"は送信されないことに注意してください。

つまり、以下の例では、名前付き入力name=button1WO N'Tは名前付き入力name=submit1が送信されます_は_が送信されます。

サンプルHTMLフォーム(index.html):

<form action="checkout.php" method="POST">

  <!-- this won't get submitted despite being named -->
  <input type="button" name="button1" value="a button">

  <!-- this one does; so the input's TYPE is important! -->
  <input type="submit" name="submit1" value="a submit button">

</form>

上記のフォームのアクションを処理するPHPスクリプト(checkout.php):

<?php var_dump($_POST); ?>

/ tmp/test /という名前のフォルダーに2つのファイルを作成し、組み込みのPHP Webサーバーをシェルから実行して、ローカルマシンで上記をテストします。

php -S localhost:3000 -t /tmp/test/

http:// localhost:30 でブラウザを開き、自分で確認します。

名前付きボタンを送信する必要があるのはなぜでしょうか?バックエンドスクリプトに依存します。たとえば、WooCommerce WordPressプラグインは、Place Orderという名前のボタンも送信されない限り、投稿されたCheckoutページを処理しません。タイプをsubmitからbuttonに変更すると、このボタンは表示されません ' tが送信されるため、Checkoutフォームは処理されません。

これはおそらく小さな細部ですが、悪魔は細部に宿っています。

3

IE 8は、実際に送信またはボタンに遭遇した最初のボタンを使用します。入力をtype = submitにすることで、どちらが望ましいかを簡単に示すのではなく、ページ上の順序が実際に重要です。

3
Martin Murphy

W3Cは、ボタン要素に関する仕様で明確にします

ボタンは、デフォルトの動作を持たないすべての種類のボタンの汎用クラスと見なされる場合があります。

W3C

0
Mahfoud Boukert

type='Submit'は、バックエンド(PHP、.NETなど)で値を転送して取得するように設定されます。 type='button'は、通常のボタンの動作を反映します。

0

<input type="button">は、フォーム内だけでなく、どこでも使用でき、フォーム内にある場合はフォームを送信しません。 Javascriptを使用する方がはるかに適しています。

<input type="submit">はフォームでのみ使用する必要があり、指定されたURLにリクエスト(GETまたはPOST)を送信します。 notをHTMLの場所に配置する必要があります。

0
user6394012