There are many legends about them. I want to know the truth. What is the difference between
<input type='button' value='text' /> and <button type='submit'>text</button>?
views:
92answers:
2
+1
A:
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
Sparky
2010-08-22 22:09:28
with `<input type="image" />` you are not limited to text and it also performs a submit.
Abel
2010-08-22 22:14:36
@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.
BalusC
2010-08-22 22:18:30
@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.
Abel
2010-08-22 22:26:39
@Abel: That was never been the intent of `input type="image"`. For that the `<button type="submit">` is intented.
BalusC
2010-08-22 22:29:00
@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 :)
Abel
2010-08-22 22:31:32
When a pixel is **chosen**, indeed :)
BalusC
2010-08-22 22:41:04
+3
A:
Not sure where you get your legends from but:
<button type="submit">(html content)</button>
IE 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 intends and purposes, it seemed excellent at first, but the browser quirks make it hard to use at times.
In your example, IE 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.
<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, give it a size and a border by means of CSS. It's original (and current) intend was to execute a script without the need to submit the form to the server.
<input type="submit" />
Like the former, but actually submits the surrounding form.
<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. You use use the usemap-attribute and (with or without that attribute), the browser will send the coordinates of you clicking the image to the server. If you just ignore these extras, it is nothing more than a submit button.
There are some subtle differences between browsers, but all will submit the value-attribute, unless for the <button> tag as explained above.
Abel
2010-08-22 22:21:12