Turn an image into a HTML5/CSS3 Submit button

Question

I would like to turn an image into a button, but keeping the Submit property (send form to it) is possible? The code below demonstrates what I wanted to do:

<form method="post" action={{route('relatorio.Pessoa')}}>
   <input type="image" src="https://icons-for-free.com/iconfiles/png/512/32px+Free+Set+Download-1320568210130207016.png" title="Gerar relatório pdf" style="max-widht:32px; max-height:32px;">
   <input type="submit" src="https://icons-for-free.com/iconfiles/png/512/32px+Free+Set+Download-1320568210130207016.png" title="Gerar relatório pdf">
</form>

In the first input is an image I wanted, but I can not submit the form. In the second input I submit the form, but the image does not appear.

Answer 1

Guy basically wears a <button> with type=submit (which is already the value default actually) with a <img> within.

See this documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type

The possible values are:
Submit: The button sends the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

On the name of the button, to make it more accessible you can use the attribute aria-label="Gerar relatório pdf", so when it receives the Focus from a screen reader the user will know what it is about. Here’s an example in the official Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute#Exemplo_1_V%C3%A1rias_Etiquetas

I just added a small CSS to clear the default styles of user-agent, so you can customize the image as you want more freely

button {
  all: unset;
  cursor: pointer;
  outline: revert;
}

<form>

  <button type="submit" aria-label="Gerar relatório pdf">
    <img src="https://icons-for-free.com/iconfiles/png/512/32px+Free+Set+Download-1320568210130207016.png"  style="max-widht:32px; max-height:32px;">
  </button>
    
</form>

Answer 2

When using the type image as follows, it will already be by default submit:

<input type="image" src="/image.png" border="0" alt="Submit"/>

Complete code in HTML:

<form method="post" action={{route('relatorio.Pessoa')}}>
   <input type="image" src="https://icons-for-free.com/iconfiles/png/512/32px+Free+Set+Download-1320568210130207016.png" title="Gerar relatório pdf" alt="Submit" style="max-widht:32px; max-height:32px;">
</form>