Submit Behaviour in the button HTML Element

Posted on:February 10, 2016

Not sure how I only found out about this only today, but a <button> HTML element without a type attribute defaults to the submit value. Test it yourself with the test rig:

<html>
  <body>
    <form id="test">
      <input type="text" />
      <button type="submit">Button with Submit Type</button>
      <button>Button With No Type</button>
      <button type="button">Button with Button Type</button>
      <button type="reset">Button With Reset Type</button>
    </form>
 
    <script>
      var form = document.getElementById("test");
      form.addEventListener(
        "submit",
        function (e) {
          e.preventDefault();
          console.log("form submitted!");
        },
        false
      );
    </script>
  </body>
</html>

So if you still want to have buttons in the form that do not trigger the submit event, you have to explicitly give it a type of button.

This is confirmed by the W3C spec:

The missing value default is the Submit Button state.