Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

HTML image submit button: supply an action name and handle coordinates carefully

Last updated: 5 Oct 20267 min read
tutorial
IntermediateBy AITrove Editorial

An input with type=image is a submit control whose alt text names the action; a pointer activation can also submit coordinates within the image.

Use case

A legacy warehouse map allows selecting a zone by clicking a diagram. Its image submit button sends a location coordinate, but keyboard users may activate the same control without a meaningful point. The server therefore offers a text list of zones and never makes coordinate data the only path to a decision. If an image merely decorates an ordinary submit action, use a regular button with text instead. The alt text here names the result of activating the control rather than describing the pixels.

html
<form action="/warehouse/zones/choose" method="get">
  <p>Select a zone from the map or use the list.</p>
  <input type="image" name="zone_point" src="/images/warehouse-zones.webp" alt="Choose a warehouse zone from the map" width="520" height="360">
  <label for="zone-list">Zone list</label>
  <select id="zone-list" name="zone">
    <option value="">Choose from the list</option>
    <option value="north-dock">North dock</option>
    <option value="returns-bay">Returns bay</option>
  </select>
  <button type="submit">Choose listed zone</button>
</form>

Behavioral boundary

The map and list are alternatives, not two independent decisions. The server must reject ambiguous submissions, map coordinates to a current zone layout, and authorize access. A keyboard activation may not supply a useful location, so the list must remain functional.

Cost and maintenance

A map image adds bytes and maintenance when zones move. The coordinate conversion and fallback path cost more than the control itself; for many tasks, a labelled list is simpler and less error-prone.

Common Mistakes

  • Do not leave an image button without meaningful alt text.
  • Do not require a precise pointer coordinate as the sole selection method.
  • Do not trust submitted coordinates without bounds and zone checks.

Connected lessons

html
forms
Storage details