input (type=image) element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The input element, having the "image" value in its type attribute, represents a graphical submit button, which is a regular image that when pressed, submits the form it belongs to.

A special feature of image buttons is that, when the form is sent through them, the coordinates where the click has occurred (in pixels and from its top-left corner) are sent with the form too. This can be useful, for example, to allow users to select an area of the image while submitting the form. Nevertheless, authors must be aware that users with visual disabilities or unsupporting browsers may have a hard time trying to submit correctly the form.

When the image button is pressed, the coordinates where the click ocurred (x and y) are sent with the form. They receive the same name of the button, but with ".x" and ".y", respectively appended. Some server-side languages, later replace the dots by underscores.

Like with regular images (img), the alt attribute is mandatory in this element and should provide a label for the button to be used in situations where the image can't be accessed.

With the arrival of HTML5, several new attributes have been added to this element (formaction, formenctype, formmethod, formnovalidate and formtarget) that define and override certain parameters pertaining how the form must be submitted. These new attributes can be used, for example, to provide more than one submit button in one form, and make each of them perform a different type of submission.

Examples

In this example we'll create a basic form with some text fields and an image submit button. Its simplicity will allow you to focus on the functionality of the image submit button: when you press it, the form is automatically submitted, along with the coordinates where the click ocurred.

We'll also set the method attribute of the form to be GET, so you can see how the URL is composed with the submitted values, among which will be the coordinates of the click constructed from the control's name. You will also be able to check how, server-side, the dots are replaced by underscores ("_") in the names of the coordinates.

<form action="../../form-result.php" method="get" target="_blank">
  <p>Username: <input type="text" name="user"></p>
  <p>Password: <input type="password" name="pass"></p>
  <p><input type="image" name="submitbutton" src="/assets/images/submit-form.png" alt="Submit form"></p>
</form>

Username:

Password:

Attributes

Specific attributes

alt

A run of text providing equivalent content for those situations where images can't be viewed (visually impaired users, non-supporting agents or browsers with images disabled). For image buttons, the value in this attribute must provide a label for the button, that would be appropriate for situations in which the user can't access the image.

The presence of this attribute in image buttons is mandatory, as its absence would compromise accessibility for visually impaired persons or users with poor technology.

Example

<form action="../../form-result.php" method="get" target="_blank">
  <p>Short description: <input type="text" name="shortdesc"></p>
  <p><input type="image" name="submitbutton" src="/assets/images/submit-form.png" alt="Submit form"></p>
</form>

Short description:

autofocus

A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value "autofocus" or the empty string (""), or if it's just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.

Example

<p><input type="image" name="submitbutton" src="submit-button.jpg" alt="Submit form data" autofocus></p>

disabled

A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.

In contrast to other controls, image buttons aren't rendered greyed out, but they are blocked from user interaction and the coordinates of the click aren't sent when the form is submitted.

Example

<form action="../../form-result.php" method="get" target="_blank">
  <p>Key word: <input type="text" name="keyword"></p>
  <p><input type="image" name="submitbutton" src="/assets/images/submit-form.png" alt="Submit form" disabled></p>
</form>

Key word:

form

The value of the id attribute of the form with which this control is associated to.

This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.

Example

<form id="form1" action="../../form-result.php" method="post" target="_blank">
  <p>Surname: <input type="text" name="surname"><p>
</form>
<p><input type="image" name="submitbutton" src="/assets/images/submit-form.png" alt="Submit form" form="form1"></p>

Surname:

formaction

A URI indicating the location of the script responsible for the manipulation of the data sent by the form. This script is usually written in a server-side language like ASP, PHP, Python, etc.

This attribute is new in HTML5 and, if present, overrides the action attribute of the form element. This allows authors to provide one form with two or more buttons that perform different types of submissions.

Example

<form method="post" target="_blank">
  <p>
    Nickname: <input type="text" name="nickname">
    <input type="image" name="submitbutton" src="/assets/images/submit-form.png" alt="Submit form" formaction="../../form-result.php">
  </p>
</form>

Nickname:

formenctype

A value indicating the encoding method to be used for data when the form is submitted. There are three possible case-insensitive values:

  • application/x-www-form-urlencoded: spaces are replaced with plus signs ("+") and special characters are converted to HEX values. This is the default value.
  • multipart/form-data: no encoding is performed. This value is necessary for file uploads.
  • text/plain: only spaces are replaced by plus signs ("+").

Remember you must use the value "multipart/form-data" whenever a file is going to be uploaded in the form. Without this configuration, file uploads will fail.

This attribute is new in HTML5 and, if present, overrides the action attribute of the form element. This allows authors to provide one form with two or more buttons that perform different types of submissions.

Example

<form action="../../form-result.php" target="_blank">
  <p>Full name: <input type="text" name="fullname"></p>
  <p>Picture: <input type="file" name="picture"></p>
  <p>
    <input type="image" name="submitwithpicture" src="/assets/images/submit-with-picture.png" alt="Submit form with picture" formenctype="multipart/form-data">
    <input type="image" name="submitwithoutpicture" src="/assets/images/submit-without-picture.png" alt="Submit form without picture">
  </p>
</form>

Full name:

Picture:

formmethod

The method browsers should use to send the form's data. There are three possible case-insensitive values:

  • get: data is attached to the URL of the request (the one provided in the action attribute). The name-value pairs are arranged in the form "name=value" and separated each other with an ampersand sign ("&"). All this string is appended to the request URL preceded by a question mark ("?"). For example, a GET string could be: "form-result.php?user=john&pass=123456"
  • post: data is attached to the body of the request.
  • dialog: specific for forms inside a dialog element. Instructs the browser to close the dialog box upon form submission. Form results should be handled by scripts.

This attribute is new in HTML5 and, if present, overrides the action attribute of the form element. This allows authors to provide one form with two or more buttons that perform different types of submissions.

Example

<form action="../../form-result.php" target="_blank">
  <p>City: <input type="text" name="city"></p>
  <p>
    <input type="image" name="sendwithget" src="/assets/images/send-with-get.png" alt="Send form with GET" formmethod="get">
    <input type="image" name="sendwithpost" src="/assets/images/send-with-post.png" alt="Send form with POST" formmethod="post">
  </p>
</form>

City:

formtarget

A value specifiyng where the results of the script in charge of processing the data should be loaded. This value can be a browsing-context name (like the value of the name attribute of an iframe) or any of the following values (case-insensitive):

  • _blank: in a new window/tab.
  • _parent: in the immediate parent context.
  • _self: in the same context that's containing the form.
  • _top: in the topmost context (the greatest parent context containing the form).

This attribute is new in HTML5 and, if present, overrides the action attribute of the form element. This allows authors to provide one form with two or more buttons that perform different types of submissions.

Example

<form action="../../form-result.php" method="post">
  <p>Group: <input type="text" name="group"></p>
  <p><input type="image" name="submitbutton" src="/assets/images/submit-form.png" alt="Submit form" formtarget="_blank"></p>
</form>

Group:

formnovalidate

A boolean value instructing the browser not to validate the form's data upon submission. If this attribute takes the value "formnovalidate" or the empty string (""), or if it's just present, the browser should omit the form's validation during submission.

This attribute is new in HTML5 and, if present, overrides the action attribute of the form element. This allows authors to provide one form with two or more buttons that perform different types of submissions.

This attribute is part of the Constraint Validation API, a new feature that allows authors to provide form validation with minimal programming intervention.

Example

<form action="../../form-result.php" target="_blank">
  <p>Username: <input type="text" name="user" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{3,15}$" title="A proper username must begin with a letter, contain letters, numbers, scores and stops, and have between 3 and 15 characters long" required></p>
  <p>
    <input type="image" name="submitform" src="/assets/images/submit-form.png" alt="Submit form">
    <input type="image" name="submitwithoutvalidating" src="/assets/images/submit-without-validating.png" alt="Submit without validating" formnovalidate>
  </p>
</form>

Username:

height

A number of pixels indicating the height that the image will take when embedded in the document.

There's no need to provide the real height of the image in this attribute. Howerver, specifiyng a different height may produce pixelated images (when bigger) or load periods longer than necessary (when smaller).

Example

<form action="../../form-result.php" method="get" target="_blank">
  <p>How are you feeling: <input type="text" name="howareyoufeeling"></p>
  <p><input type="image" name="submitbutton" src="/assets/images/submit-form.png" alt="Submit form" height="71"></p>
</form>

name

A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the value attribute. Both attributes together will conform a name-value pair that will be used to process the form data.

For image buttons a couple of additional values are sent to the server. These are the x and y coordinates (taken from the top-left corner of the element) of the point where the click occurred. These coordinates are named using the value of the name attribute followed by the corresponding ".x" or ".y".

Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.

Some server-side scripts change the period (".") in the names of the coordinates by an underscore ("_"). Authors must be aware of this fact in order to properly process the submitted data.

Example

<form action="../../form-result.php" method="get" target="_blank">
  <p>Short analysis: <input type="text" name="shortanalysis"></p>
  <p><input type="image" name="submitbutton" src="/assets/images/submit-form.png" alt="Submit form"></p>
</form>

Short analysis:

src

The URL of the image resource. This attribute is required as it points to the resource that will be actually embedded in the document.

Example

<form action="../../form-result.php" method="get" target="_blank">
  <p>Favorite sport: <input type="text" name="favoritesport"></p>
  <p><input type="image" name="submitbutton" src="/assets/images/submit-form.png" alt="Submit form"></p>
</form>

Favorite sport:

type

A value indicating the type of the field that this element represents. There are twenty two possible values (case-insensitive):

  • hidden: a hidden control used to send information to the server, typically managed by scripts.
  • text: a control used to input a single-line piece of text.
  • search: same as text but for search purposes.
  • tel: a control used to provide a telephone number.
  • url: a text box used to input a single and absolute URL.
  • email: a control designed to edit one or more e-mail addresses.
  • password: a text box for editing passwords, where the characters are represented by dots.
  • date: a control to input a specific date.
  • month: a control to input a specific month.
  • week: a control to input a specific week.
  • time: a control to input a specific time.
  • datetime-local: a control to input a specific local date and time.
  • number: a control to input a number.
  • range: a control to input one or two numbers inside a range.
  • color: a control to input a color.
  • checkbox: a control to input a boolean value (true/false).
  • radio: a control used to choose one single option among many.
  • file: a control used to upload files to the server.
  • submit: a button used to submit the form.
  • image: same as submit but with the ability to be shown as an image instead of using the default button appearance.
  • reset: a button used to reset the form's controls to their default values.
  • button: a button with no default action associated.

When this attribute isn't present, the element behaves as it would have the value "text".

Example

<input type="image" name="submitbutton" src="button.jpg" alt="Submit data">

width

A number of pixels indicating the width that the image will take when embedded in the document.

There's no need to provide the real width of the image in this attribute. Howerver, specifiyng a different width may produce pixelated images (when bigger) or load periods longer than necessary (when smaller).

Example

<form action="../../form-result.php" method="get" target="_blank">
  <p>New words: <input type="text" name="newwords"></p>
  <p><input type="image" name="submitbutton" src="/assets/images/submit-form.png" alt="Submit form" width="187"></p>
</form>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.