HTML Input Alt Attribute - Dofactory

HTML <input> alt Attribute HTML <img> HTML <ins>

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.

Example

#

An alt attribute on an <input> element. The image button is loaded correctly, therefore alternative text does not display.

First name Last name <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> Try it live

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.

First name Last name <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> Try it live

Using alt

#

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.

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

#

  • Our HTML input Tag Reference
  • Our HTML Input Types Tutorial
  • Our HTML alt Attribute Reference
  • Our CSS Forms Tutorial

Back to <input>

Từ khóa » Html Button Alt Text