Difference Between ≪Input Type='Button' /≫ and ≪Input Type='Submit' /≫

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.

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='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.

Difference between button and input?

Here's a page describing the differences (basically you can put html into a <button></button>

And an other page describing why people avoid <button></button> (Hint: IE6)

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

Also have a look at this slideshow about button.

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);
}
});

Two submit buttons in one form

If you give each one a name, the clicked one will be sent through as any other input.

<input type="submit" name="button_1" value="Click me">

POST the values of several html input type='button'

You could use radio/option buttons and do some very nice styling.

See:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
http://www.sitepoint.com/15-jquery-radio-button-checkbox-style-plugins/
http://www.tutorialrepublic.com/faq/how-to-create-custom-radio-buttons-using-css-and-jquery.php
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/

Some really nice ones:

http://www.dynamicdrive.com/style/csslibrary/item/css3_oval_switch_checkboxes/
http://www.webdesignerdepot.com/2011/07/css-buttons-tutorials-and-examples/

Along your lines:

http://viralpatel.net/blogs/css-radio-button-checkbox-background/

Below taken from "Last Link":

/*
Hide radio button (the round disc)
we will use just the label to create pushbutton effect
*/
input[type=radio] {
display:none;
margin:10px;
}

/*
Change the look'n'feel of labels (which are adjacent to radiobuttons).
Add some margin, padding to label
*/
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
background-color: #e7e7e7;
border-color: #ddd;
}
/*
Change background color for label next to checked radio button
to make it look like highlighted button
*/
input[type=radio]:checked + label {
background-image: none;
background-color:#d0d0d0;
}


Related Topics



Leave a reply



Submit