CodesBeautify

HTML Image Input Generator

Generate an input type image graphical submit button with alt text and size attributes.

HTMLimage submit button
<input type="image" src="submit.png" alt="Search" width="96" height="32" name="search">
Runs locally in your browser

About the HTML Image Input Generator

An <input type="image"> is a submit button drawn as a picture. It behaves like a submit button in every way except one: when it is clicked, the browser also posts the coordinates of the click as name.x and name.y, a survival from the days of server side image maps. That pair still arrives in your request today and surprises people reading their form data for the first time.

The alt attribute is mandatory in practice. It is the only label the control has, so without it a screen reader falls back to announcing the file name or nothing at all, and this generator refuses to produce markup with the alt field left empty. Width and height are worth setting so the layout does not shift while the image loads, and formaction lets a second image button post the same form to a different endpoint.

Before you use one, consider whether a plain <button> with an image or an inline SVG inside it would serve better. That gives you text alongside the graphic, ordinary CSS control over hover and focus states, and no stray coordinate parameters in the payload. The image input remains handy for a compact search magnifier or a legacy form you are keeping alive. To turn the button graphic into a data URL so it needs no separate request, use Image to Base64, and for the plain markup version the HTML Button Generator.

How to use

  1. Enter the image path and its alt text.
  2. Set width and height to reserve the space.
  3. Add a name so the click coordinates are identifiable.
  4. Tick the form wrapper for a complete snippet, then copy.

Common questions

Why are x and y showing up in my form data?
An image input posts the click coordinates as name.x and name.y. That is normal and you can ignore them.
Is alt text really required?
Yes. It is the only accessible label the control has, which is why this generator will not build the tag without it.
Should I use this instead of a styled button?
Usually not. A button containing an image or SVG gives you text, easier styling and no coordinate parameters.
Can an image input reset a form?
No, it always submits. Use a button with type="reset" if you need that behaviour.