Button Type "Button" VS. "Submit"

<button> vs. <input type=button />. Which to use?

• Here's a page describing the differences (basically you can put html into a <button></button>)
• And another page describing why people avoid <button></button> (Hint: IE6)

Another IE problem when using <button />:

And while we're talking about IE, it's
got a couple of bugs related to the
width of buttons. It'll mysteriously
add extra padding when you're trying
to add styles, meaning you have to add
a tiny hack to get things under
control.

Difference between <input type='button' /> and <input type='submit' />

<input type="button" /> buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.

<input type="submit"> buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.

The first submit button of the form is also the one being clicked for implicit submission, f.e. by pressing enter in a text input.

What's the point of <button type=button>?

Yep, there's a reason - but (usually) only if you're in a <form> element.

If you include a button in a form element without specifying it's just a regular button, it defaults to a submit button.

<form>
    <button>I will submit the form when clicked!</button>
</form>

vs

<form>
    <button type='button'>I won't!</button>
</form>

The first one is assumed to be type=submit since a type attribute hasn't been specified.

---

If you are not in a <form> element, the button won't have anything to submit, so it doesn't matter as much. :)

Semantics usually become important at some point in your application's lifetime, though, so it's a good idea to make a habit of specifying the type.

---

The only other reason that could be relevant is if there's a styling rule that specifies [type=button] or something. That's not recommended, though.

Difference between <input type='submit' /> and <button type='submit'>text</button>

Not sure where you get your legends from but:

Submit button with <button>

As with:

<button type="submit">(html content)</button>

IE6 will submit all text for this button between the tags, other browsers will only submit the value. Using <button> gives you more layout freedom over the design of the button. In all its intents and purposes, it seemed excellent at first, but various browser quirks make it hard to use at times.

In your example, IE6 will send text to the server, while most other browsers will send nothing. To make it cross-browser compatible, use <button type="submit" value="text">text</button>. Better yet: don't use the value, because if you add HTML it becomes rather tricky what is received on server side. Instead, if you must send an extra value, use a hidden field.

Button with <input>

As with:

<input type="button" />

By default, this does next to nothing. It will not even submit your form. You can only place text on the button and give it a size and a border by means of CSS. Its original (and current) intent was to execute a script without the need to submit the form to the server.

Normal submit button with <input>

As with:

<input type="submit" />

Like the former, but actually submits the surrounding form.

Image submit button with <input>

As with:

<input type="image" />

Like the former (submit), it will also submit a form, but you can use any image. This used to be the preferred way to use images as buttons when a form needed submitting. For more control, <button> is now used. This can also be used for server side image maps but that's a rarity these days. When you use the usemap-attribute and (with or without that attribute), the browser will send the mouse-pointer X/Y coordinates to the server (more precisely, the mouse-pointer location inside the button of the moment you click it). If you just ignore these extras, it is nothing more than a submit button disguised as an image.

There are some subtle differences between browsers, but all will submit the value-attribute, except for the <button> tag as explained above.

<input type=button> vs <button>

Unlike <input> tags, <button>'s can contain other html elements as their labels. <input type="button"> can only accept a string as its label text (css styles not withstanding).

Additionally, the <button> element accepts a wide range of uncommon but useful attributes regarding multiple forms and click actions. See the MDN page for more details.

As for one "out living" the other, the HTML standard is remarkably backwards compatible. Humanity will put men on Mars before either is eliminated from the HTML standard.

Submit a form using button type=button instead of submit

Had help from @Learner with this one who made this fiddle - jsfiddle.net/ukgvam9k/26

Clarification wanted in the difference between input of type button vs input of type submit when calling jquery form.submit

input or button type="submit" has a default behaviour: Submit the form

button type="button" (or no type at all) doesn't have a default behaviour and you should add it with a listener, as you're already doing for click event. Inside that function you should validate and, if it's the case, submit the form with $('#myForm').submit();, with no params

With this piece of code, you're adding a submit listener to the form instead of submit it:

    $('#myForm').submit(function (event) {
        addSpinnerToButton($self);

        if ($(this).valid()) {
            return true;
        } else {
            event.preventDefault();
            removeSpinnerFromButton($self);
            return false;
        }
    });

When button is clicked, do your validations and then submit the form. Right now, you need a plugin to validate with $(this).valid(), otherwise, an error will be thrown.

$('button[data-validate="true"]').click(function () {
    var $self = $(this);
    addSpinnerToButton($self);

        if ($(this).valid()) {
            $('#myForm').submit();
        } else {
            removeSpinnerFromButton($self);
        }
});

---

Related Topics