Qual é a diferença da <img src=''>
e <input type='image' src=''>
?
Alguma ocasião específica que melhor seria o uso de alguma delas?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeSegundo documentação Mozilla, o tag ou etiqueta img
representa um bloco de imagem no documento e enquanto input
com tipo de imagem, representa como um botão gráfica, como se fosse <input type='submit' />
com imagem no fundo do botão.
The HTML Image Element (
<img>
) represents an image of the document. LinkThe
<input type="image">
is 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
Sim,
A tag img possui mais a finalidade de apenas apresentar uma imagem em seu site.
O input type="image" serve também para "transformar" uma imagem em um botão que irá executar alguma ação depois. Por exemplo, um campo de busca com uma imagem de uma lupa dentro de um 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>
São duas as principais diferenças:
O <input type="image">
funciona como um botão, e irá submeter o formulário a que pertence quando for clicado.
Ao clicar em um <input type="image">
, será submetida a posição (x, y)
do clique em relação à imagem. Experimente clicar na imagem desde exemplo, e verá os parâmetros x
e y
na nova URL.
Referência: página da MDN sobre inputs de imagem