Member Avatar for bestgraphicsbd

I know how to create an image button for the "submit" but how do I do it for the "clear form" tag? :surprised

  • 2 Contributors
  • 2 Replies
  • 88 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by bestgraphicsbd

Dani AI

Generated

Short answer: prefer a semantic reset control rather than a raw image with an inline click handler. was right that an image click can trigger a clear, but wrapping the graphic in a real reset control preserves keyboard focus, form semantics and screen-reader behavior. Use a button (or an input type="reset") and style it with a background image so the browser handles the reset for you.

Example pattern (keeps accessibility and styling separate):

<form id="myForm">
  ...
  <button type="reset" class="reset-btn" aria-label="Clear form">
    <span class="sr-only">Clear form</span>
  </button>
</form>

.reset-btn {
  width: 40px;
  height: 30px;
  background: url("clear.png") no-repeat center/contain;
  border: none;
  cursor: pointer;
}
.sr-only { position: absolute; left: -9999px; }

Notes and pitfalls: avoid accidental clears — use a confirmation step or an undo pattern for destructive forms. If using a JS framework (React, Vue, Angular) remember native resets only change DOM form controls; you must also update framework state. For details on semantic buttons and form reset behavior see the MDN docs for the button element and HTMLFormElement.reset().

Recommended Answers

All 2 Replies

Member Avatar for tgreer

<img src="myImage.png" onclick="document.getElementById('myForm').reset();" />

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.