Member Avatar for larry29936

My contact form starts with:

<form id="form1" method="POST" action="mail.php">

I'd like to replace the last line in my contact form:

<button type="submit" value="Send" style="margin-top:15px; margin-left: 500px; text-align: center;">Send Email</button>

with one that contains 

<img src="images/button_send-email.png" alt="Email">

but have no idea what it should look like. I tried but the button doesn't even show.

Please teach me how this should be done.

Thanks in advance,
Larry

Edited by larry29936
  • 2 Contributors
  • 3 Replies
  • 717 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

A quick, practical pattern that keeps form handling predictable and improves accessibility:

wanted an image as the submit control and pointed to the graphical-submit approach. A more robust method is to use a real submit button (so the server gets a normal name/value pair) and visually replace it with an image via CSS. This keeps checks on the server simple and avoids the browser-submit quirks that image-type controls can introduce.

<form method="post" action="/path/to/handler.php">
  <button class="send-btn" name="action" value="send" aria-label="Send message">
    <span class="visually-hidden">Send message</span>
  </button>
</form>

<style>
.send-btn {
  width: 160px;
  height: 48px;
  border: 0;
  background: url('/assets/send-button.png') center/contain no-repeat;
  cursor: pointer;
  background-color: transparent;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
</style>

If the image-input approach is kept, note that browsers send click coordinates (e.g., name_x / name_y) instead of a simple submit value; server code needs to check for those. In PHP that looks like if (isset($_POST['sendAction_x'])) { /* submitted */ } or add a hidden field so the handler sees a normal flag.

Layout note: avoid fixed offsets like margin-left:500px; use flexbox or text-align: right for alignment so the button stays usable on small screens. Also include visible or off-screen text (or aria-label) so the control remains accessible to screen readers.

Recommended Answers

All 3 Replies

Member Avatar for Dani

Try <input type="image" src="images/button_send-email.png" alt="Email">

You can see according to W3 that type="image" creates a graphical submit button.

Edited by Dani because: Typo
Member Avatar for Dani

Did it work?

Member Avatar for Dani

Oh nevermind. I see the question has been marked as solved.

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.