HTML Image Submit Button

<input type="image"> creates an image that acts as a form submit button. When the user activates the image, the form is submitted just like a submit button, and a mouse or pointer click can also submit the click coordinates.

<input type="image" name="save" src="images/savechanges.jpg" alt="Save changes">

Basic Image Submit Button Top ↑

The original Plus2net example uses the existing images/savechanges.jpg asset as the submit control:

<form method="post">
  <input type="image"
         name="imgbtn"
         src="images/savechanges.jpg"
         alt="Save changes">
</form>

<input> is a void element, so it does not use a closing </input> tag.

Important Attributes Top ↑

• src: URL of the image used as the submit control.
• alt: text alternative and accessible name for the image button.
• name: base name used when the control submits click coordinates.
• width / height: intrinsic image dimensions. Supplying known dimensions can help the browser reserve layout space.
• formaction: overrides the form's action for this submit control.
• formmethod: overrides the form's submission method.
• formenctype: overrides the encoding type when applicable.
• formtarget: overrides where the response is opened.
• formnovalidate: submits without browser constraint validation.

Submitted Click Coordinates Top ↑

An image submit control can submit the horizontal and vertical coordinates where the image was clicked. With name="imgbtn", the submitted field names are based on imgbtn.x and imgbtn.y. PHP normally exposes dots in submitted field names as underscores, so these commonly appear as $_POST['imgbtn_x'] and $_POST['imgbtn_y'].

<input type="image"
       name="imgbtn"
       src="images/savechanges.jpg"
       alt="Save changes">

The coordinates should not be treated as trusted data. If an application actually uses them, validate them on the server.

Working Form Example Top ↑

Enter your name and activate the existing image submit button:

The HTML for the form is:

<form method="post" action="html_frmimgbtn.php#form">
  <label for="visitor-name">Your name</label>
  <input type="text" id="visitor-name" name="t1">
  <input type="image" name="imgbtn" src="images/savechanges.jpg" alt="Submit name">
</form>

formaction and Other Form Overrides Top ↑

Because type="image" is a submit control, it can override selected form submission settings in the same way as a submit button.

<form action="save.php" method="post">
  <input type="image"
         src="images/savechanges.jpg"
         alt="Preview changes"
         formaction="preview.php"
         formtarget="_blank">
</form>

Use these overrides only when a form genuinely needs different submit actions. Every destination must independently validate submitted data. POST changes how data is sent, but it is not encryption; use HTTPS for sensitive information.

Alt Text and Accessibility Top ↑

The alt text should describe the button's action, such as alt="Save changes" or alt="Search". It is not simply tooltip text.

• Do not use vague alt text such as alt="image" or alt="button".
• Do not rely on the picture alone to communicate an essential action.
• Make sure keyboard users can see a clear focus indicator.
• A normal text submit button is often the most robust choice when an image is only decorative.

Image Submit Button vs Image Link Top ↑

An image submit button submits a form. An image inside an anchor navigates to another URL. These are different interactions.

<!-- Image link: navigation -->
<a href="site_map.php">
  <img src="images/html.jpg" alt="HTML tutorial home">
</a>

Do not add the obsolete border="0" attribute to the image. If an unwanted border is introduced by styling, control it with CSS.

Common Image Button Mistakes Top ↑

Using alt as tooltip text Top ↑

alt provides a text alternative and accessible name. Write it as the action the control performs.

Using the obsolete border attribute Top ↑

Use CSS for borders and other visual presentation.

Adding a closing </input> tag Top ↑

<input> is a void element and does not have an end tag.

Assuming the image button submits only one value Top ↑

Pointer activation can also submit x/y coordinates. Applications should not build security decisions around those client-supplied values.

Using an image button for ordinary navigation Top ↑

Use an <a href> for navigation. Use a submit control when the purpose is to submit a form.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: