form要素のinput type="button" と button要素のJavaScriptでの挙動の違い

 フォーム要素でボタンを使用する場合、現在ではbutton要素が推奨されてます。

理由はそこら中で書いてありますが、CSSで疑似要素が使えたり、デザイン性で柔軟だからです。

ここではJavaScriptによる違いを書きます。

まずは、何もないbutton要素

何も指定しないと、type="submit"と同じ送信になり、formのaction属性と同じになります。

なのでtype="button"にしたい場合は属性を書かなければなりません。

button要素の中のテキストを取得したい場合は、input要素のようにvalueでは取得できません。button要素の文字は、タグで挟まれてるのでtextContentで取得します。

button要素でカウンターを作る例

冷静に考えたら分かりますね。

submitで値を送信したい場合は、そのままvalue属性が書けます。