The alt attribute on an <input> tag defines alternative text.
This attribute only applies to <input> elements of type image.
Alternative text only shows when the image cannot be loaded.
An alt attribute on an <input> element.
The image button is loaded correctly, therefore alternative text does not display.
<form action="/tutorial/action.html">
<label for="firstname">First name</label><br />
<input type="text" id="firstname" name="firstname"><br />
<label for="lastname">Last name</label><br />
<input type="text" id="lastname" name="lastname"><br /><br />
<input type="image" alt="Submit" width="40" height="40"
src="/img/html/arrow.png">
</form>
In this example the image name has a typo and cannot be loaded.
The alt text displays next to an icon of a broken image. The submit button is still functional.
<form action="/tutorial/action.html">
<label for="firstname">First name</label><br />
<input type="text" id="firstname" name="firstname"><br />
<label for="lastname">Last name</label><br />
<input type="text" id="lastname" name="lastname"><br /><br />
<input type="image" alt="Submit" width="40" height="40"
src="/img/html/arrarow.png">
</form>
Alternative displays when the <input> image cannot be loaded.
Alternative text is also used by screen readers, search engines, etc.
Tip: Use the alt attribute on all your image inputs.
<input src="URL" alt="text">
| Value | Description |
|---|---|
| text | Alternative text for the image <input>. |
Here is when src support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
