We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

<input> elements of type "image" are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.

<input id="image" type="image" alt="Login"
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">

Value None — the value attribute should not be specified.
Events None.
Supported Common Attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget
IDL attributes None.
Methods None.

Value

<input type="image"> elements do not accept value attributes. The path to the image to be displayed is specified in the src atribute.

Using image inputs

The <input type="image"> element is a replaced element (an element whose content isn't generated or directly managed by the CSS layer), behaving in much the same way as a regular <img> element, but with the capabilities of a submit button.

Essential image input features

Let's look at a basic example that includes all the essential features you'd need to use (These work exactly the same as they do on the <img> element.):

<input id="image" type="image" width="100" height="30" alt="Login"
       src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">

  • The src attribute is used to specify the path to the image you want to display in the button.
  • The alt attribute provides alt text for the image, so screen reader users can get a better idea of what the button is used for. It will also display if the image can't be shown for any reason (for example if the path is misspelled). If possible, use text which matches the label you'd use if you were using a standard submit button.
  • The width and height attributes are used to specify the width and height the image should be shown at, in pixels. The button is the same size as the image; if you need the button's hit area to be bigger than the image, you will need to use CSS (e.g. padding). Also, if you specify only one dimension, the other is automatically adjusted so that the image maintains its original aspect ratio.

Overriding default form behaviors

<input type="image"> elements — like regular submit buttons — can accept a number of attributes that override the default form behavior:

formaction HTML5
The URI of a program that processes the information submitted by the input element; overrides the action attribute of the element's form owner.
formenctype HTML5
Specifies the type of content that is used to submit the form to the server. Possible values are:
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
  • text/plain.

If this attribute is specified, it overrides the enctype attribute of the element's form owner.

formmethod HTML5
Specifies the HTTP method that the browser uses to submit the form. Possible values are:
  • post: The data from the form is included in the body of the form and is sent to the server.
  • get: The data from the form is appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.

If specified, this attribute overrides the method attribute of the element's form owner.

formnovalidate HTML5
A Boolean attribute specifying that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the element's form owner.
formtarget HTML5
A name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the element's form owner. The following keywords have special meanings:
  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
  • _blank: Load the response into a new unnamed browsing context.
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  • _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same as _self.

Using the x and y data points

When you submit a form using a button created with <input type="image">, two extra data points are submitted to the server automatically by the browser — x and y. You can see this in action in our X Y coordinates example.

When you click on the image to submit the form, you'll see the data appended to the URL as parameters, for example "?x=52&y=55". If the image input has a name attribute, then keep in mind that the specified name is prefixed on every attribute, so if the name is "position", then the returned coordinates would be formatted in the URL as "?position.x=52&position.y=55". This, of course, applies to all other attributes as well.

These are the X and Y coordinates of the image that the mouse clicked on to submit the form, where (0,0) is the top-left of the image. These can be used when the position the image was clicked on is significant, for example you might have a map that when clicked, sends the coordinates that were clicked to the server. The server-side code then works out what location was clicked on, and returns information about places nearby.

In our above example, we could write server-side code that works out what color was clicked on by the coordinates submitted, and keeps a tally of the favorite colors people voted for.

Adjusting the image's position and scaling algorithm

You can use the object-position property to adjust the positioning of the image within the <input> element's frame, and the object-fit property to control how the image's size is adjusted to fit within the frame. This allows you to specify a frame for the image using the width and height attributes to set aside space in the layout, then adjust where within that space the image is located and how (or if) it is scaled to occupy that space.

Examples

A login form

The following example shows the same button as before, but included in the context of a typical login form.

HTML

<form>
  <p>Login to your account</p>
  <div>
    <label for="userId">User ID</label>
    <input type="text" id="userId" name="userId">
  </div>
  <div>
    <label for="pwd">Password</label>
    <input type="password" id="pwd" name="pwd">
  </div>
  <div>
    <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100">
  </div>
</form>

CSS

And now some simple CSS to make the basic elements sit more neatly:

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

Adjusting the image position and scaling

In this example, we adapt the previous example to set aside more space for the image and then adjust the actual image's size and positioning using object-fit and object-position.

HTML

<form>
  <p>Login to your account</p>
  <div>
    <label for="userId">User ID</label>
    <input type="text" id="userId" name="userId">
  </div>
  <div>
    <label for="pwd">Password</label>
    <input type="password" id="pwd" name="pwd">
  </div>
  <div>
    <input id="image" type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login" width="200" height="100">
  </div>
</form>

CSS

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

#image {
  object-position: right top;
  object-fit: contain;
  background-color: #ddd;
}

Here, object-position is configured to draw the image at the top-right corner of the element, while object-fit is set to contain, which indicates that the image should be drawn at the largest size that will fit within the element's box without altering its aspect ratio. Note the visible grey background of the element still visible in the area not covered by the image.

Specifications

Specification Status
HTML Living Standard
The definition of '<input type="image">' in that specification.
Living Standard
HTML5
The definition of '<input type="image">' in that specification.
Recommendation

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)

See also