This question already has answers here:
Difference between <input type='button' /> and <input type='submit' />
(4 answers)
Closed 1 year ago.
Is there a difference between a button with type="button" vs type="submit"? Are there functional differences, or is it just a descriptive name for easier code reading?
Is this different than input?
From MDN:
type
The type of the button. Possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
As for the difference between button and input:
A button can have a separate value as data, while for an input the data and button text are always the same:
<input type="button" value="Button Text"> <!-- Form data will be "Button Text" -->
<button type="button" value="Data">Button Text</button>
A button can have HTML content (e.g. images), while an input can only have text.
A button may be easier to tell apart from other input controls (like text fields) in CSS. Note backwards browser compatibility.
input {
}
button { /* Always works */
}
input[type=button] { /* Not supported in IE < 7 */
}
A button with type "button" won't submit a form but one with no type or type=submit (the default) will. Buttons with type=submit are nearly the same as inputs with type=submit but buttons are able to contain HTML content.
<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.
when form submit by below code, We should use type=button instead of type=submit to prevent form submit twice.
#using (Html.BeginForm("View", "Controller", FormMethod.Post, new { id = "signupform" }))
{
//Form elements
}
Buttons can be stylized much better than inputs can be used for anchor tags(links).
Images
Content etc.
Inputs can achieve the same functionality as buttons but uglier design.
Let's say inputs are oldschool, buttons are cooler.
They have different default behaviour regarding submitting form data to the server
The button has an attribute named "type" and can contain those values:
submit: Has default behaviour of submitting the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
<button type="button"></button> buttons will not submit a form - they don't do anything by default. Button won't submit form on its own.It is a simple button which is used to perform some operation by using javascript whereas Submit is a kind of button which by default submit the form whenever user clicks on submit button.
Related
I came across value of attribute in button and as it was explained here https://www.quora.com/What-is-the-difference-between-name-and-value-in-an-HTML-tag value attribute defines text on button. And I expected that <button value="submit"></button> will be equal to <button>Submit</button> but <button value="submit"></button> output button with no text on it. Thus, I a bit confused with why and when we need to use value attribute for button tags in HTML
Value is the result to be posted to server when the button is pressed and has nothing to do with display text.
The button's value gets submitted to the server; You might want to know which button the user clicked.
we can define submit button by two ways.
<input type="submit" value="save" >
by this method, the value will be displayed as text for the button.
But the button tag.
<button type="submit" value="save">Submit Form</button>
Here the value is represented as the value of that button field if you need to use it.
Also, someone use this value when they use multiple submit forms in a php file to identify the form, someone uses the submit button name too.
Value actually acts as text when used in the form like
<input type="button" value="report" >
And acts as a value when used as
<button type="button" value="report">Report</button>
I've run into this html:
<button type="button></button>
What's the difference between the html above and this:
<button></button>
From the MDN page on the <button> tag:
For the type attribute of the <button> tag, the possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
So, if the button is inside a <form> and there is no type specified, it defaults to a submit button. So, if you want it to be just a normal button that does not default to a submit button, then you specify type="button".
1.only button has type = "submit" on it by default which on click submits form .
2.button type="button" is only clickable and does not have any event handler on it.You can assign one if you want
There are many legends about them. I want to know the truth. What are the differences between the two following examples?
<input type='submit' value='text' />
<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.
With <button>, you can use img tags, etc. where text is
<button type='submit'> text -- can be img etc. </button>
with <input> type, you are limited to text
In summary :
<input type="submit">
<button type="submit"> Submit </button>
Both by default will visually draw a button that performs the same action (submit the form).
However, it is recommended to use <button type="submit"> because it has better semantics, better ARIA support and it is easier to style.
Suppose I have the following HTML form:
<form>
...
<input type="submit" name="queue" value="Queue item">
<input type="submit" name="submit" value="Submit item">
</form>
How do I know which button the user clicked (without using javascript)?
I looked at submitted data and it seems that when "Queue Item" is clicked then "queue" = "Queue Item" gets sent to the server. And when "Submit item" is clicked then "submit" = "Submit item" sets sent.
Can I rely on this behavior? Is it documented somewhere in the standard on HTML forms? How do you guys do it?
Yes, you can rely on this; it's fully documented here. The specific relevant lines say:
When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form. Those controls for which name/value pairs are submitted are called successful controls.
and
If a form contains more than one submit button, only the activated submit button is successful.
Yep you can rely on that behaviour.
When <input type="submit" name="queue" value="Queue item"> is clicked, the field "queue" will be set and "submit" will not be.
Whereas when the other gets clicked, the field "submit" will be set, and "queue" will not be.
If you're not assured by this, you can split them into 2 forms and work on it that way.
You can rely on this behavior. You get the value of the input. I would use javascript to toggle a hidden form value, but since you mentioned no javascript you do not have multiple choices.
It's a standard. Since it's an input tag, and has a value, that means you get the value submitted.
Split the form into two forms, replicating any other inputs needed by the other action. Or, if you really just need to know if the user wants to "queue vs. submit" the item, change both submit buttons to radio selections to toggle between the two options, and have a new, separate "submit the form" button.
In that situation if you want a one-click option, you could use Javascript to detect when one of the radio buttons is selected, and auto-submit the form instantly. (Using Javascript for user interface, rather than form handling)
as far as I know there are three methods to submit an HTML form without JS or keyboard:
1. input type=submit
2. button tag
3. input type=image
Is there another way to create an element submitting the form on being pressed?
Is it correct to handle button tag (type=submit) same as input type=submit (I mean, if we discard the fact button can contain inner html, we can simply replace button with input type="submit" and the form will be sent correctly)?
Is adding name.x and name.y the only difference when using input type=image?
Not that I know of, those should be the only pure html ways to submit the form other than directly invoking the submit method which is internal Javascript, but that is what the submit button does anyway.
The button element has issues in Internet Explorer regarding which
value it passes, I do not recommend
the use of it.
Yes, they're pretty much the same
As far as I know input type=image is exactly the same except that it
sends those extra coordinate
parameters which you can ignore on the
server-side.
With JavaScript, you can call the form's submit method. However, this should be avoided as it will not work if the user has JavaScript disabled.
No, because a button tag can be given a value separate from the text displayed on the button, not to mention the <button> tag's ability to inline HTML. (For example <button type="submit"><img src="submit.png" alt="Submit"></button>).
Yes, the main feature of <input type="image"> is the addition of the x and y coordinates.
You can use JavaScript to simulate it. I'd take an <input type="submit"> and replace it with the element that you'd like to submit a form with, so it's still accessible for users without JavaScript.
<input type="submit" id="submit-button" value="submit" />
Then in JavaScript (using jQuery in this example):
$('#submit-button').remove().after('Submit form');
$('#submit-link').click( function(event){
event.preventDefault();
$('#submit-link').closest('form').submit();
});