What is <input type="image" /> typically used for?

Question

I clicked on it and the form is submited, along with a query string appended like x=1&y=2 to the url targetted by the form's action.

Why?

Answer 1

It behaves like a mini imagemap. This is by design.

Answer 2

IMAGE is a TYPE attribute value to the INPUT element for FORMs. It specifies an image that can be clicked upon to pass information to the processing script. In implementation, this form TYPE acts much like the INPUT TYPE=SUBMIT field, but unlike the SUBMIT field, the coordinates of the image that were activated are sent back to the server in addition to the rest of the form data.

from eskimo.com

Answer 3

Those are the coordinates that you clicked on an image, a property of the "image" type of input control. You can ignore those if you don't need them.

Answer 4

The x and y values are the co-ordinates of the mouse pointer relative to the element when clicked.

From the HTML 4.02 specification:

When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

Answer 5

IE and Firefox will both create different variables when submitting from an image submit button. My advice is not to rely on any of them being present in your form processing. If you must (to determine which of multiple buttons was pressed) you will need to check for multiple variables.

I'll give you three guesses which browser causes the problem and the first two don't count. If you have an image button

<input type="image" name="restore" value="Restore" src="...">

when the user clicks, Mozilla will return the values

restore = Restore

restore_x = number of pixels from top of image

restore_y = number of pixels from left edge of image

IE, however, will not return the restore=Restore Template key/value. So you can get caught if you develop in one browser and then test in IE, because

isset($_POST['restore'])

will always return false in IE, but will work as expected in Mozilla (and probably Opera but I don't know off the top of my head).

• From a 2004 webmasterworld.com forum post I just googled