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

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

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

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

まずは、何もないbutton要素

view plainprint?

1.     
2. <form action="test.html">  
3. <button>テキスト</button>  
4. </form>  
5.    

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

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

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

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

view plainprint?

1.     
2. <form>  
3. <button id="btn" type="button">0</button>  
4. </form>  
5. <script>  
6.  document.addEventListener('DOMContentLoaded', () => {  
7.   
8.          let count = 0;  
9.   
10.          var btn = document.getElementById("btn");  
11.   
12.          btn.onclick = function() {  
13.                  //this.value = ++count; ではありません  
14.                  this.textContent(++count);  
15.          };  
16.   
17.  });           
18.    
19. </script>  
20.    

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

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