A story about a form and two buttons

I apologise in advance if I’m wasting your time; I simply didn’t know. It’s one of those things you know but never actually looked into it. But I thought to share my peasant discovery with the hope you don’t have to find out on your own. If you do I’ll be here for you so let’s get started.

Throughout our little story, I expect only one thing from you: be honest! We will look into the <form> element and its agoraphobia when surrounded by buttons. Try all examples and inspect the code if you need to before setting your expectation.

A form without button

Let’s look at a simple form with one input and guess what the result would be:

As you probably guessed the form gets submitted.

A form with a submit type input

Let’s add a submit input to our form and see if anything changes. I know it’s boring but for completeness let’s have a look anyway. Try clicking on the button and hit Enter while focused in the input.

As you probably guessed regardless of the action, the form gets submitted.

A form with 2 submit type inputs

Taking it up a notch, I added a second Cancel button to our form. What results do you think you will see now?

Again as expected, when you submit the form and click on the submit button, it submits the form — that is weird sentence. But when you click on Cancel, it doesn’t. So far so good.

Changing the position of the buttons

Do you think it matters? Do you think that if the cancel button comes first, the form will not get submitted? Let’s find out:

Hmm.. The form doesn’t get submitted now that we switched the buttons’ order. Okay, it might be the fact that both of them are a submit input element. Nope. Try changing the Cancel input into a button, the same thing happens.

I really didn’t think when hitting Enter in an input field, it actually finds the first button or input element of type submit and kind of clicks it. A <button> by default has submit as a type per the MDN documentation (search for type). That explains why the form is picking up the Cancel button as a submit action.

Let’s try another bizarre example just to prove the above. Let’s move the cancel button as the first child of the form and see what happens.

I think I always assumed when you submit a form without using the button, somehow the form gets submitted like the first example.

Looking more into this, the HTML Standard specifies what it calls Implicit Submission. The two important parts of that for our little story are that:
1) A form’s element default button is the first <button> or <input type=’submit’> in the tree order within a form.
2) If there is no submit button, the form element submits itself.

Word of advice to my future self

Since every codebase has a btn CSS class either coming from a framework, such as Foundation or Bootstrap, or an internal CSS rule, always use the anchor tag with the .btn class attached when adding any other action other than submit. At least you won’t run into weird behaviours. See the last example below:

Interested in making an Impact? Join the carwow-team!
Feeling social? Connect with us on Twitter and LinkedIn :-)