Submit Behaviour in the button HTML Element

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>

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.