HTML Image Input Generator
Configure an image submit input — src, alt, sizing, and form overrides — and copy the ready-to-use HTML with a live preview.
Last updated: May 25, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is HTML Image Input Generator?
`<input type="image">` is a special form control that renders an image but behaves like a submit button. Clicking it submits the surrounding form, and the click coordinates are appended as two extra fields — `name.x` and `name.y` — so the server can react to where on the image the user clicked. It is most commonly used for branded submit buttons, image maps that double as form controls, and old-school checkout flows.
Like `<img>`, it requires an `src` and an `alt` attribute. The `alt` text is displayed when the image fails to load and read by screen readers, so it should describe the action the button performs (e.g. "Search", "Submit", "Buy now"), not the picture. The `width` and `height` attributes prevent layout shift before the image loads.
This generator builds the markup from a form, previews the rendered button live, and includes the form-override attributes (`formaction`, `formmethod`, `formtarget`) you can use to make a single button submit somewhere different from the rest of the form.
How to Use HTML Image Input Generator
Paste the image URL into the src field.
Write alt text that describes the button's action (e.g. "Submit order").
Set width and height in pixels to reserve space and avoid layout shift.
Add a name so the click coordinates are submitted as name.x and name.y.
Optionally override the form's action, method, or target with formaction/formmethod/formtarget.
Copy the generated HTML and paste it inside a <form> element.
Common Use Cases
- Replacing a plain submit button with a branded image (logo, custom-designed button).
- Building an image map where each clickable region triggers a different formaction.
- Adding a graphical "Buy now" button to a legacy checkout form.
- Submitting a search form via a magnifying-glass icon.
- Generating image-based submit buttons for HTML email-friendly forms.
Example Input and Output
A 200×60 "Submit order" button that posts to /checkout instead of the parent form action.
src: /img/submit-button.png
alt: Submit order
name: submit
width: 200
height: 60
formaction: /checkout
formmethod: post<input type="image" src="/img/submit-button.png" alt="Submit order" name="submit" width="200" height="60" formaction="/checkout" formmethod="post">Accessibility
Always provide alt text describing the button's action. Without it, screen-reader users hear nothing meaningful. For purely decorative submit buttons, a styled <button> with text is usually a better choice.
Privacy
The generator runs entirely in your browser. The only network request is the one to load your preview image.
Coordinate submission
The submitted x/y values are relative to the rendered image in CSS pixels. If you scale the image via width/height, the coordinates are scaled accordingly.