HTML reference
input type="image"
An image input is a form submit button displayed as an image. It can be useful when the visual design genuinely communicates an action, but a normal button is often easier to style and maintain.
What you will learn
- How to submit a form with an image button
- Why alternative text and keyboard access matter
- How click coordinates are submitted
Basic example
<form action="/map" method="post">
<input type="image" src="map-search.png" alt="Search this map">
</form>The alt value is the accessible name of the control. Describe the action, not merely the file name. Unlike an ordinary image, this control can submit the form with keyboard focus.
Click coordinates
When the user submits the image, the browser sends the click position as two fields based on the control's name, such as map.x and map.y. Treat these values as untrusted input and validate them on the server.
Choosing a control
Use <button> when text or an icon can express the action. It is usually easier to make responsive and accessible. If an image is essential, provide useful alt text and test the control without a mouse.