<input type="image">
The <input type="image"> HTML element is an image that can be used to submit a form, like the <input type="submit"> element. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The <input type="image"> HTML element is an image that can be used to submit a form, like the <input type="submit"> element. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML attribute | ||||||
| input elements of type image are used to create graphical submit buttons, i.e., submit buttons that take the form of an image rather than text. | 1 | 12 | 1 | 1 | 18 | 1 |
Syntax
<form action="/submit">
<input type="image" src="submit-btn.png"
alt="送信" width="100" height="40">
</form>Live demo
Image submit button
Submit a form with an image input and inspect the click coordinates it sends.
Choice tiles
Use multiple image submit buttons when each image represents a distinct action.
Compact checkout action
Place an image input next to fields when a branded submit surface is required.
Use cases
Improve form input
Use <input type="image"> to make data entry more efficient, guided, or predictable inside real forms.
Reduce friction
Apply <input type="image"> when the browser can help users complete a task with fewer mistakes or less repetitive work.
Cautions
- Test <input type="image"> in your target browsers and input environments before depending on it as a primary behavior.
- Browser assistance can vary, so verify the exact UX with real devices, keyboards, and autofill behavior.
Accessibility
- Keep labels, instructions, validation, and keyboard behavior clear so the enhancement helps rather than surprises users.
Related links
Powered by web-features