Home > Abakada: Back to Basics > Language References > HTML Elements > INPUT type=image Element

HTML Input Elements

---

Creates a graphical submit button.

HTML 2, 3.2, 4, 4.01, 5

HTML Syntax

<input
   accesskey = key
   align = absbottom | absmiddle | baseline | bottom | left | middle | right | texttop | top
   alt = text
   class = classname
   disabled
   dynsrc = url
   id = value
   lowsrc = url
   name = name
   size = n
   src = url
   style = css_style_rules
   tabindex = n
   title = text
   type = image
   value = value
>

The INPUT type=image element renders a submit button with an image. The value of the src attribute specifies the URI of the image that is used on the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute.

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 x-coordinate is submitted under the name of the control with .x appended, and the y-coordinate is submitted under the name of the control with .y appended, as in name.x=x-value and name.y=y-value. Any value property is ignored. The image itself is specified by the src property, exactly as for the IMG element.

If the server takes different actions depending on the location clicked, users of non-graphical browsers will be disadvantaged. For this reason, authors should consider alternate approaches:

• Use multiple submit buttons ( each with its own image ) in place of a single graphical submit button. Authors may use style sheets to control the positioning of these buttons.
• Use a client-side image map together with scripting.

NOTE: Only the <input> start tag must be present. The element has no end tag.

The <input_image> element has no attribute of its own, but supports global attributes common to all HTML elements.

<input type="image" src="../shared/go.gif" name="whatever"
   width=32 height=32 border=0 alt="Click me">

IMG   INPUT