Given the following two buttons:
<button type="submit" name="MyButton" value="Foo">Do Foo</button>
<button type="submit" name="MyButton" value="Bar">Do Bar</button>
When clicking these buttons, all browsers except IE7 and below will post the button's value ("Foo" or "Bar"), whereas IE7 and below instead post the text ("Do Foo" or "Do Bar").
(This is an MVC project, but the issue is not specific to MVC.)
This thread has a lot of answers, but none of them will work when:
The value and text are different, and
JavaScript is disabled
We want to support flexible button text so that business can change these through our CMS without a code change. So we can't assume that our text and values will be the same. But we also don't want to depend on JavaScript to solve this.
However, I can't think of any way to solve this without either requiring JavaScript, or keeping the value and text the same.
The usual hack is to key off the name instead of the value.
<button type="submit" name="MyButton_foo" value="Foo">Do Foo</button>
<button type="submit" name="MyButton_bar" value="Bar">Do Bar</button>
Then search the submitted form values for ones that match the pattern /^MyButton_(.*)$/. There are some examples for a variety of languages (although not C#) in an article I wrote some years ago.
Related
I am new to programming please forgive me if my question is out of place or if it does not follow community guidelines.
I was following a youtube tutorial and this is the simplified code:
<form class="form" id="form">
<input type="text" id="input" autocomplete="off"/>
<button type="submit" class="btn">Submit</button>
</form>
My question is why is there a need to state type="submit" ? I tried removing the type and it seems to work fine.
Also, I saw another question on StackOverflow that states the default for button when it is used in a form is already submit.
Is the person in the tutorial just being thorough or is there another reason as to why it needs to be stated?
You don't need to because button's default type is submit.
But, you have to because your purpose is not writing something that "just works". You read code 90% of time and write code 10% of time, so readability is essential. (though there are some weird places where the purpose is exactly the opposite, but that's an edge case)
If the form is so large that you don't know if your submit button is inside the form or not, simply stating type="submit" will give you a clear idea that it's inside a form.
There are many more examples in coding that you simply write "unnecessary" code for documentation purpose, such as naming a function catchButterfly() instead of f().
In general, it's always a good practice to be VERY verbose and explicit about every piece of code you write because it's just a few extra lines of code but the advantage is HUGE.
<button type="submit"> and <button> are the same thing.
The reason is the default type of a button is submit.
So you can leave it off if you want. If you do not want the button to submit the form, then you want to use type="button".
It is explained in the docs on MDN or www.w3.org
It works fine when removed because submit is the default type :
https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type
This question already has answers here:
Difference between <input type='button' /> and <input type='submit' />
(4 answers)
Closed 1 year ago.
input type="submit" and button tag are they interchangeable? or if there is any difference then When to use input type="submit" and when button ?
And if there is no difference then why we have 2 tags for same purpose?
http://www.w3.org/TR/html4/interact/forms.html#h-17.5
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
So for functionality only they're interchangeable!
(Don't forget, type="submit" is the default with button, so leave it off!)
The <input type="button" /> is just a button and won't do anything by itself.
The <input type="submit" />, when inside a form element, will submit the form when clicked.
Another useful 'special' button is the <input type="reset" /> that will clear the form.
Although both elements deliver functionally the same result *, I strongly recommend you use <button>:
Far more explicit and readable. input suggests that the control is editable, or can be edited by the user; button is far more explicit in terms of the purpose it serves
Easier to style in CSS; as mentioned above, FIrefox and IE have quirks in which input[type="submit"] do not display correctly in some cases
Predictable requests: IE has verying behaviours when values are submitted in the POST/GET request to the server
Markup-friendly; you can nest items, for example, icons, inside the button.
HTML5, forward-thinking; as developers, it is our responsibility to adopt to the new spec once it is officialized. HTML5, as of right now, has been official for over one year now, and has been shown in many cases to boost SEO.
* With the exception of <button type="button"> which by default has no specified behaviour.
In summary, I highly discourage use of <input type="submit"/>.
Use <button> tag instead of <input type="button"..>. It is the advised practice in bootstrap 3.
http://getbootstrap.com/css/#buttons-tags
"Cross-browser rendering
As a best practice, we highly recommend using the <button> element
whenever possible to ensure matching cross-browser rendering.
Among other things, there's a Firefox bug that prevents us from
setting the line-height of <input>-based buttons, causing them to not
exactly match the height of other buttons on Firefox."
<input type='submit' /> doesn't support HTML inside of it, since it's a single self-closing tag. <button>, on the other hand, supports HTML, images, etc. inside because it's a tag pair: <button><img src='myimage.gif' /></button>. <button> is also more flexible when it comes to CSS styling.
The disadvantage of <button> is that it's not fully supported by older browsers. IE6/7, for example, don't display it correctly.
Unless you have some specific reason, it's probably best to stick to <input type='submit' />.
I realize this is an old question but I found this on mozilla.org and think it applies.
A button can be of three types: submit, reset, or button. A click on a
submit button sends the form's data to the web page defined by the
action attribute of the element. A click on a reset button
resets all the form widgets to their default value immediately. From a
UX point of view, this is considered bad practice. A click on a button
button does... nothing! That sounds silly, but it's amazingly useful
to build custom buttons with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish
<button> is newer than <input type="submit">, is more semantic, easy to stylize and support HTML inside of it.
While the other answers are great and answer the question there is one thing to consider when using input type="submit" and button. With an input type="submit" you cannot use a CSS pseudo element on the input but you can for a button!
This is one reason to use a button element over an input when it comes to styling.
I don't know if this is a bug or a feature, but there is very important (for some cases at least) difference I found: <input type="submit"> creates key value pair in your request and <button type="submit"> doesn't. Tested in Chrome and Safari.
So when you have multiple submit buttons in your form and want to know which one was clicked - do not use button, use input type="submit" instead.
If you are talking about <input type=button>, it won't automatically submit the form
if you are talking about the <button> tag, that's newer and doesn't automatically submit in all browsers.
Bottom line, if you want the form to submit on click in all browsers, use <input type="submit">
This question already has answers here:
Difference between <input type='button' /> and <input type='submit' />
(4 answers)
Closed 1 year ago.
input type="submit" and button tag are they interchangeable? or if there is any difference then When to use input type="submit" and when button ?
And if there is no difference then why we have 2 tags for same purpose?
http://www.w3.org/TR/html4/interact/forms.html#h-17.5
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
So for functionality only they're interchangeable!
(Don't forget, type="submit" is the default with button, so leave it off!)
The <input type="button" /> is just a button and won't do anything by itself.
The <input type="submit" />, when inside a form element, will submit the form when clicked.
Another useful 'special' button is the <input type="reset" /> that will clear the form.
Although both elements deliver functionally the same result *, I strongly recommend you use <button>:
Far more explicit and readable. input suggests that the control is editable, or can be edited by the user; button is far more explicit in terms of the purpose it serves
Easier to style in CSS; as mentioned above, FIrefox and IE have quirks in which input[type="submit"] do not display correctly in some cases
Predictable requests: IE has verying behaviours when values are submitted in the POST/GET request to the server
Markup-friendly; you can nest items, for example, icons, inside the button.
HTML5, forward-thinking; as developers, it is our responsibility to adopt to the new spec once it is officialized. HTML5, as of right now, has been official for over one year now, and has been shown in many cases to boost SEO.
* With the exception of <button type="button"> which by default has no specified behaviour.
In summary, I highly discourage use of <input type="submit"/>.
Use <button> tag instead of <input type="button"..>. It is the advised practice in bootstrap 3.
http://getbootstrap.com/css/#buttons-tags
"Cross-browser rendering
As a best practice, we highly recommend using the <button> element
whenever possible to ensure matching cross-browser rendering.
Among other things, there's a Firefox bug that prevents us from
setting the line-height of <input>-based buttons, causing them to not
exactly match the height of other buttons on Firefox."
<input type='submit' /> doesn't support HTML inside of it, since it's a single self-closing tag. <button>, on the other hand, supports HTML, images, etc. inside because it's a tag pair: <button><img src='myimage.gif' /></button>. <button> is also more flexible when it comes to CSS styling.
The disadvantage of <button> is that it's not fully supported by older browsers. IE6/7, for example, don't display it correctly.
Unless you have some specific reason, it's probably best to stick to <input type='submit' />.
I realize this is an old question but I found this on mozilla.org and think it applies.
A button can be of three types: submit, reset, or button. A click on a
submit button sends the form's data to the web page defined by the
action attribute of the element. A click on a reset button
resets all the form widgets to their default value immediately. From a
UX point of view, this is considered bad practice. A click on a button
button does... nothing! That sounds silly, but it's amazingly useful
to build custom buttons with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish
<button> is newer than <input type="submit">, is more semantic, easy to stylize and support HTML inside of it.
While the other answers are great and answer the question there is one thing to consider when using input type="submit" and button. With an input type="submit" you cannot use a CSS pseudo element on the input but you can for a button!
This is one reason to use a button element over an input when it comes to styling.
I don't know if this is a bug or a feature, but there is very important (for some cases at least) difference I found: <input type="submit"> creates key value pair in your request and <button type="submit"> doesn't. Tested in Chrome and Safari.
So when you have multiple submit buttons in your form and want to know which one was clicked - do not use button, use input type="submit" instead.
If you are talking about <input type=button>, it won't automatically submit the form
if you are talking about the <button> tag, that's newer and doesn't automatically submit in all browsers.
Bottom line, if you want the form to submit on click in all browsers, use <input type="submit">
Short version:
How can I have my form's button label text differ from the value submitted to the server without using the <button> tag?
Long version:
I wanted to have the text that appeared in a button in a form to be different than the value submitted in the query string. So, I looked around, and came across this approach...
<button name="method" type="submit" value="repackage">Update Config</button>
...and that worked on IE9 on one of my laptops and I was happy. The user saw "Update Config" and the server received method=repackage in the query string.
Then I brought this app to work and ran it on a workstation, also with IE9. But something had gone wrong. The user still saw "Update Config", but the server now received method=Update%20Config in the query string.
So I investigated some more. I found that www.w3schools.com recommmended not using a <button> tag in a form. They say: "If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form" in this article. This seems to be what I am experiencing.
So I looked some more, and found lots of conflicting information about the right way to do this. For example here is a Stack Overflow post that asks exactly this question, but the accepted answer is to use the <button> tag. I can say from experience and research that this is not a reliable approach.
For newcomers: With some CSS this works like a charm as of September 2017:
<form>
<label style="padding:5px; cursor:pointer; border:solid 1px; border-color:#ccc">
<input style="display:none" type="submit" name="method" value="repackage">
<span>Update Config</span>
</label>
</form>
If there's no other way try this:
Use an image button, instead of button. An image button will work as ordinary submit button, but you create an image of the desired button text (no one can change your text then).
<input type="image" src="http://images.webestools.com/buttons.php?frm=2&btn_type=31&txt=Update+Config" name="method" value="repackage">
This works as well. Manipulate the appearance using the bootstrap button classes.
<label class="btn btn-primary">
<input class="d-none" type="submit" name="method" value="repackage">
Update Config
</label>
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.