Is there any significant difference between the IMG tag and INPUT IMAGE

Question

Is there any significant difference between the IMG tag and INPUT IMAGE

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

2

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

Any specific occasion that would be best to use any of them?

html

asked by anonymous 23.07.2015 / 22:50

3 answers

Loading external "pages" via AJAX. Will Google crawl? Problems with localhost applications with AngularJS and NodeJS

score 1 · Answer 1

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

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

The <input type="image"> is a graphical submit button. You must use the attribute attribute to define the source of the image and the alt attribute to define alternative text.    Link

score 1 · Answer 2

Yes,

The img tag is meant to only display an image on your site.

The input type="image" also serves to "transform" an image into a button that will perform some action afterwards. 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>

score 1 · Answer 3

There are two main differences:

The <input type="image"> functions as a button, and will submit the form it belongs to when it is clicked.
When you click on a <input type="image"> , the (x, y) of click position will be submitted relative to the image. Try click the image from example , and you will see the parameters x and y in the new URL.

Reference : MDN page on image