Include Button In Form Without Submitting

Question

How can I place a button inside a form which when clicked will not submit the form?

Demo HTML:

<form>
    <button>TEST</button>
</form>
<div></div>

Demo JavaScript (jQuery):

$(document).ready(function() {
    $('form').submit(function() {
        $('div').append('SUBMITTED<br>');
        return false;
    });
});

JSFiddle

When the button is clicked the form gets submitted. Is there a way to disable this behavior (rendering this demo form unsubmittable)?

My actual use case for this is creating a bootstrap styled button to activate a file input.

Answer 1

By default <button> type is submit, so just make it button:

<form>
    <button type="button">TEST</button>
</form>

JSFiddle

Answer 2

There is the tag <button> in HTML. You could use something like this:

<button type="button">This is the button label</button>

You can check the definition and usage here: http://www.w3schools.com/tags/tag_button.asp