There is some significant difference between the IMG tag and INPUT IMAGE

Asked

Viewed 154 times

2

What is the difference of <img src=''> and <input type='image' src=''> ?

Any specific occasion that would be better the use of any of them?

html

3 answers

1

According to Mozilla documentation, the tag or tag img represents an image block in the document and while input with image type, represents as a graphic button, as if it were <input type='submit' /> with image on the bottom of the button.

The HTML Image Element (<img>) represents an image of the Document. Link

The <input type="image"> A Graphical Submit button. You must use the src attribute to define the source of the image and the alt attribute to define Alternative text. Link

1

Yes,

The tag img has more the purpose of just presenting an image on your website.

The input type="image" also serves to "transform" an image into a button that will perform some action later. For example, a search field with an image of a magnifying glass inside a form.

.pre_input_cabecalho {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    background: white;
    width: 263px;
    height: 40px;
}
<div class="pre_input_cabecalho">
   <form method="post" action="">
      <input type="text" name="texto_busca" style="margin-top: 15px; border: none; width: 210px; padding-left: 10px;" placeholder="O que você esta procurando?">
      <input title="Buscar" name="busca" alt="busca.png" type="image" style="padding-left: 0px;" src="http://www.domaplas.com.br/images/busca.png">
   </form>
</div>

1

There are two main differences:

  • The <input type="image"> acts as a button, and will submit the form to which it belongs when clicked.

  • By clicking on a <input type="image">, shall be subject to the position (x, y) click relative to image. Try click on the image from the example, and see the parameters x and y in the new URL.

Reference: MDN page on image inputs

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.