<input src=””>

Attribute of
<input> HTML Tag
What does <input src=""> do?
Defines the source URL for an image input.

Code Example

<form>
 <label for="flamingo">Click on the Flamingo</label><br>
 <input type="image" src="/wp-content/uploads/flamingo.jpg">
</form>

Using the src attribute

The src attribute is only valid for image type inputs, which are a form of submit input which display as a clickable image instead of as a button. The src attribute works exactly the same as the src attribute for the <img> element, defining a URL for an image file. Besides a file location, the src can also specify a data URI.

Buttons or pictures of buttons

It is perhaps a little too common to use the image type of input in order to display a picture of a button. This is especially true in skeuomorphically designed interfaces, but also shows up in tacky buy now buttons.

The problem with images as buttons is that it isn’t a particularly usable or accessible approach to form design. Buttons should be buttons, not pictures of buttons. Otherwise any problem with the picture (a blind user, a slow connection, a weird screen) turns the button into an annoyance or a hindrance.

One of the best uses for the image type of input button is when you want the user to select from several different images. You could make the image selection and form submission two separate steps (which you would need to do if you want the user to make several image selections before submitting). But, if the user only has one image choice to make, and the form can be submitted immediately upon making the choice, then using the image as a submit button works very well.

Additionally, when using an image as a submit button, the coordinates of the click are included in the form request. This can be used in a way similar to an image map.

If you want a big orange button with blue letters, you can just use CSS. It’ll save you bandwidth.

Browser Support for src

AllAllAllAllAllAll