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>
4 Answers
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.
1 Comment
Mr Lister
Since you've been editing anyway, the point about IE6 is still true with IE11 in quirks mode. (Yet another reason to not use quirks mode). Fixed in Edge though. Oh, and there are more differences between <input> and <button>: <input> has
white-space:pre by default, <button> does not. This becomes apparent when attempting to make a button wider than the viewport.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
6 Comments
Abel
with
<input type="image" /> you are not limited to text and it also performs a submit.
BalusC
@Abel: that's more to create an image map which in turn sends the mouse pointer position as
name.x and name.y parameters (note that the name parameter isn't present!). I'd rather use <input type="submit"> with a CSS background if the sole purpose is to have a button with a background image.Abel
@BalusC: True, but it's purpose, at the time of writing the HTML 2.0 standard, when there was no CSS, was, as described, to use an image as a button or as a server-side image map. But indeed, you can (ab)use a normal button with a background image to do the same with CSS and HTML.
BalusC
@Abel: That was never been the intent of
input type="image". For that the <button type="submit"> is intented.Abel
@BalusC: perhaps we understand the standard differently, but this is in Lee's original text for HTML 2.0 standard: "
TYPE=IMAGE' implies TYPE=SUBMIT' processing; that is, when a pixel is chosen, the form as a whole is submitted.". Make of it what you think is the real intent :) |
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.
Comments
Syntax
If we consider it superficially, the only difference is that the button element provides more flexible content styling inside (for example, adding an icon):
<button type="submit">
<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
stroke="red"
fill="grey"
>
<circle cx="50" cy="50" r="40" />
</svg>
Log In
</button>
Whereas the input component uses the value attribute as the button label:
<input type="submit" value="Send Request" />
HTML5 Semantics
If you delve into the semantics of the generated html. An external tool analyzing the site can draw its own conclusions regarding the input field or button. The specification does not recommend using one or the other, since this is a different way to describe the same thing.
Browser support
If you need support for older browser versions, it's better to use input. Check and decide for yourself:
Comments
<input type="submit">and<button type="submit">?inputis a void element. Do not use<input />, just use<input>.type=submitforbuttonwas not even a concern there (likely because it wasn't even part of the std. back then (AFAIK), when that other question was asked).