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?
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?
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. LinkThe
<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.