`input type="image"` Element

Skip to Page Content
Up, Next & Previous Links
Your Location
Main Menu
Page Footer

In this page:

Module
Description
#REQUIRED Attributes
Specific Attributes
Common Attributes
Content Model

Module

The input type="image" element is an inline element declared by the XHTML 1.1 Forms Module but is not present in the *W3C XHTML 1.1 Basic Forms Module

The input type="image" element creates a graphical submit button for a form. Its functionality is similar to that of the input type="submit" element, in that pressing it causes the form to be submitted, but with two major differences:

The button is represented by an image (specified in the src attribute) instead of being rendered in the user-agent's default button style (based upon the text in the value attribute).
Note: If images are not supported or enabled in the user agent, the text within the alt attribute is rendered in place of the image. Bear in mind, however, that some user agents will not render this alternative text in such a way that it is obvious it represents a button - this may cause confusion to the user.
When a form is submitted using an input type="image" button, two name=value pairs representing the coordinates activated within the image are sent to the processing URI (see the Server-side Image Map Module). This differs from the standard input type="submit" behaviour, where only one name=value pair is sent, with the value containing the button text.
Note: Some user agents also send the contents of any value attribute in a separate pair for input type="image" elements, but this is not common and should not be relied upon - this is why the value attribute has not been listed among the Specific Attributes on this page.

For example, the submit button below will send the name=value pairs img.x=xpos and img.y=ypos to the processing URI if this button is used to submit the enclosing form.
[ Here, xpos is the x pixel coordinate (from the left of the image) and ypos is the y pixel coordinate (from the top of the image). ]

<input type="image" name="img" src="/images/submit.gif" alt="Submit" />

This example button is contained below in a method="get" form. If you press it, you will reload this page with the two coordinate name=value pairs appended to the URI as a query string just prior to the fragment identifier for this "Further Information" section (#details).

For other types of submit button see the input type="submit" and button elements.

#REQUIRED Attributes

Although the type attribute is not #REQUIRED on the input element, its default value is "text" and so must be present on input type="image".

Specific Attributes

Specific attributes of the input type="image" element are listed below:

From the Forms Module - the Element's own Module

accesskey [ type Character ]

Key to be pressed which allows the graphical submit button to be activated directly from the keyboard

alt [ type Text ]

Alternative text for the button image

Note: Although technically optional, you should always include alternative text for your graphical buttons, which will be displayed in place of the image if images are disabled in or not supported by the user agent.

disabled [ type Boolean ]

If this attribute is present, the graphical submit button is initially disabled - no data is sent to the processing URI for disabled elements when the form is submitted. The user cannot interact with a disabled control.

name [ type CDATA ]

A name for the graphical submit button. If this button is used to submit the form, this name is used to specify to the processing URI the activated coordinates within the button image - see the Server-side Image Map Module for more information.

Note: I have not included a value attribute for this element since not all user agents pass this data to the processing URI. Some (e.g. the Firefox 3 browser I am currently using) pass it as an extra name=value pair - in addition to the two (x and y) coordinate pairs - but many do not (e.g. Opera) and so this behaviour should not be relied upon.

Note: Although technically optional, a note in the *Forms Module DTD says that the name attribute is required on all input elements except "submit" and "reset".
If, despite this note, no name attribute is specified on an input type="image" element, many browsers send x=xpos and y=ypos pairs to the processing URI on button activation (instead of the name-qualified pairs). This should be borne in mind, especially if you are using other form controls with the names "x" or "y".

src [ type URI ]

URI for the button image (although technically optional, there is no point having a graphical button without an image!)

tabindex [ type Number ]

An integer between 0 and 32767 specifying the position of the graphical submit button in the tabbing order of the document

From the Client-side Image Map Module

usemap [ type IDREF ]: The id of a map element to be applied to the button image

From the Server-side Image Map Module

ismap [ type Boolean ]: Indicates that the button image is a server-side image map

From the Intrinsic Events Module

onblur [ type Script ]: Script to be executed when the element loses focus
onfocus [ type Script ]: Script to be executed when the element receives focus

Common Attributes

Common attributes of the input type="image" element are listed below:

From the Core Attribute Collection

class [ type NMTOKENS ]: One or more space separated classes
id [ type ID ]: A unique identifier for the element
style [ type CDATA ], from the Style Attribute Module (deprecated): Element-specific styles
title [ type Text ]: Descriptive title for the element (in some user agents this may appear as a "tooltip" when the mouse hovers over the element)
xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]: XML namespace

From the I18N Attribute Collection

dir [ type Enumeration (ltr | rtl) ], from the Bi-directional Text Module: Left-to-right or right-to-left directionality
xml:lang [ type LanguageCode ]: A language code for the element