attribute tells the browser where to look for the image that should be
presented to the user. This image may be located in the same directory as
the page that’s referencing the file, in another directory on the same
server, or on another server entirely.
The example specifies an image that’s located in the same directory as the web page that’s calling it, but if the submit image was located in a directory that was one level higher than the referencing document, the syntax would be as follows:
<input type="image" src="../submit.jpg" alt="Submit your details"/>
equates to "move up one directory in the hierarchy.”
You can also reference an image relative to the web site’s root (the folder or file after the domain name):
<input type="image" src="/submit.jpg" alt="Submit your details"/>
This attribute markup basically says, “display the image submit.jpg that can be found in www.mydomain.com/.” This is a very handy way of referencing files, as you can move the document containing the submit image to another location on the file system without having to change the link.
If you were referencing an image that’s held on
another server, you’d express the
src using a
complete URI, as follows:
<input type="image" src="http://www.some-domain.com/submit.jpg" alt="Submit your details"/>
attribute for this image input shows that the image resides in the same
directory as the web page that references it:
<form> ⋮ <input type="image" src="submit.jpg" alt="Submit your details"/> </form>
This attribute takes as its value the location of the button image relative to the referencing document, relative to the server root, or as a complete URI containing http:// or https://, the server name, and the path to the document on that server.
It causes no compatibility issues, and has excellent support across all tested browsers.