<input src="">
- Attribute of
- How To Use Input To Create Form Fields In HTML: Easy Tutorial
- What does
<input src="">do? - Defines the source URL for an image input.
Contents
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.
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
 |  |  |  |  |  |
| All | All | All | All | All | All |