web-dev-qa-db-ja.com

ボタンタイプ「ボタン」と「送信」

buttonとtype="button"の違いとtype="submit"の違いはありますか？機能的な違いはありますか、それともコードを読みやすくするための単なる説明的な名前ですか？

これはinputとは異なりますか？

htmlhtml-inputhtmlbutton
17
akantoword

From [〜＃〜] mdn [〜＃〜] ：

type
ボタンのタイプ。可能な値は次のとおりです。

  • submit：ボタンは、フォームデータをサーバーに送信します。 これは、属性が指定されていない場合、または属性が空または無効な値に動的に変更された場合のデフォルトです。
  • reset：ボタンは、すべてのコントロールを初期値にリセットします。
  • button：ボタンにはデフォルトの動作はありません。イベントが発生したときにトリガーされる要素のイベントに関連付けられたクライアント側スクリプトを持つことができます。

buttonとinputの違いは：

  • buttonはデータとして個別の値を持つことができますが、inputの場合、データとボタンテキストは常に同じです：

    <input type="button" value="Button Text"> <!-- Form data will be "Button Text" -->
<button type="button" value="Data">Button Text</button>

  • buttonにはHTMLコンテンツ（画像など）を含めることができますが、inputにはテキストのみを含めることができます。

  • buttonは、CSSの他のinputコントロール（テキストフィールドなど）と区別しやすいかもしれません。ブラウザの下位互換性に注意してください。

    input {

}
button { /* Always works */

}
input[type=button] { /* Not supported in IE < 7 */

}
7
Midas

タイプ "button"のボタンはフォームを送信しませんが、タイプがないかtype = submit（デフォルト）のボタンは送信します。 type = submitのボタンはtype = submitの入力とほぼ同じですが、ボタンにはHTMLコンテンツを含めることができます。

5
j08691

ボタンは、入力をアンカータグ（リンク）に使用するよりもはるかにスタイルを設定できます。

  • 画像
  • コンテンツなど.

入力はボタンと同じ機能を実現できますが、デザインは醜いです。

入力が古い学校で、ボタンがもっとクールだとしましょう。

1
Grecdev
<input type="button" />

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

<input type="submit">

javaScriptで特に指定しない限り、ユーザーがボタンをクリックしたときに、ボタンはフォームを送信します。

以下のコードでフォームを送信する場合、フォームが2回送信されないように、type = submitではなくtype = buttonを使用する必要があります。

@using (Html.BeginForm("View", "Controller", FormMethod.Post, new { id = "signupform" }))
        {
         //Form elements
        }
1
Pergin Sheni

サーバーへのフォームデータの送信に関するデフォルトの動作は異なります。ボタンには「type」という名前の属性があり、次の値を含めることができます。

submit：フォームデータをサーバーに送信するデフォルトの動作があります。これは、属性が指定されていない場合、または属性が空の値または無効な値に動的に変更された場合のデフォルトです。

button：ボタンにはnoのデフォルトの動作があります。イベントが発生したときにトリガーされる要素のイベントに関連付けられたクライアント側スクリプトを持つことができます。

1
Ahmet Arslan

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

0
Zihad Hridoy