<button>の違いを教えてくださいClick Me！</button>と<button type = "button"> Click Me！</button>？

Question

私は2つの次のコードスニペットに遭遇：

function myFunction() { 
 
    var x = document.getElementById("demo"); 
 
    x.style.fontSize = "25px"; 
 
    x.style.color = "red"; 
 
}

<p id="demo">Click the button to change the layout of this paragraph</p> 
 
<button onclick="myFunction()">Click Me!</button>

<h1>My First JavaScript</h1> 
 
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button> 
 
<p id="demo"></p>

私は違うタイプ= "ボタン" 属性が追加されている理由を理解することはできませんよ2番目のコードスニペットで？

2つのボタンの違いは何ですか？

Answer 1

あなたの例では、type="button"を追加しても何の違いもありません（削除すると表示されます）。

は通常、あなたがそれをフォームで使用されている場合<button>のtypeがsubmitあるデフォルトとして、あなたのボタンのtypeを指定し、提出することが<form>を引き起こすクリックすると、通常はどちらか現在のページをリロードしますか新しいページを読み込みます。

デフォルトのsubmitの代わりにbuttonと指定すると、そのような動作を防ぐことができます。

Answer 2

<button>タグは、クリック可能なボタンを定義します。

<button>の要素の中に、テキストや画像などのコンテンツを配置できます。これは、この要素と<input>要素で作成されたボタンの違いです。

それは非常に多くの属性を持っており、typeは、それらの一つであり、このタイプは、3つの値があります：

1. button（ノーマルボタン）
2. reset
（特別形のため、アクションをリセット処理する）
3. をsubmit（フォーム送信を処理する）

他のプロパティを知るには、を書き込むhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

https://www.w3schools.com/tags/tag_button.asp

Answer 3

210は、クリック可能なボタンとしてボタンを定義します。

<button>と大きな違いはありませんが、一部のブラウザで<button>要素に異なるデフォルトの種類が使用される可能性があり、バグにつながる可能性があるため、type属性をボタン要素に配置する方が安全です。

Answer 4

属性typeは、<Button>のスタイルを決定します。ただし、Internet Explorerではデフォルト値はbuttonです。ただし、他のブラウザでは、デフォルト値がsubmitで、W3Cでもデフォルト値です。 typeを常にbuttonと定義する必要があります。

Answer 5

ボタンの3種類があります。

1. を提出 - 現在のフォームデータを送信します。 （デフォルトです。）
2. リセット - 現在の形式でデータをリセットします。
3. ボタン - 単なるボタンです。その効果は、他のものによって制御されなければなりません（つまり、JavaScriptで）。それはあなたのコードでは何も変化しないので、

ボタンの属性は、その大したではありません。 2つのコードバージョンの唯一の違いは、 "onclick"属性（code2）の後にコード全体を記述し、 "onlick"属性（code1）の後に関数名を書き込むことです。 このサイトの同じ属性を使用して、ボタンの属性と入力とボタンとの違いについて読むことができますhttp://html.com/attributes/button-type/ 私はそれがあなたを大いに助けてくれることを願っています。