HTML <input> alt Attribute

The alt attribute on an <input> tag defines alternative text to display in case the input image is not available.

Example

#

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>

Using alt

The alt attribute specifies an alternative text for an <input> of type image.

This text will be displayed when the <input> image source cannot be found or loaded.

Alternative text is also used by screen readers, search engines, JavaScript solutions, etc.

Tip: Use the alt attribute on all your image inputs.


Syntax

<input src="URL" alt="text">

Values

#

Value Description
text Alternative text for the image <input>.

Browser support

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

You may also like

 Back to <input>
Guides