HTML | DOM Input Image alt Property

Last Updated : 26 Aug, 2022

The HTML DOM Input Image alt Property is used set or return the value of the alt attribute of an Input Image. The alt Attribute is used to specify the alternate text for an image. It is useful when the image not displayed. It is used to give alternative information for an image.

Syntax:

It returns the alt property.

imageObject.alt

It is used to Set the alt property.

imageObject.alt = text

Property value: It contains the value i.e. text which specify alternative text for an input Image.

Return value: It returns a string value which represents an alternative text for an Input Image.

Example 1: This Example returns the alt property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Input Image alt Property
    </title>
</head>
<body style="text-align:center;">
    <h1 style="color:green;"> 
      GeeksforGeeks 
    </h1>
    <h4>
      DOM Input Image alt Property
    </h4>
    <input id="myImage" formEnctype="application/x-www-form-urlencoded" 
           type="image" formtarget="#" src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png" 
           alt="Geeks_Logo" width="48" height="48" formMethod="post" 
           autofocus>
    <br>
    <br>
    <button onclick="my_geek()">Submit </button>
    <h2 id="Geek_h" style="color:green;"></h2>
    <script>
        function my_geek() {
 
            // Return Input Image alt Property. 
            var txt = document.getElementById(
                "myImage").alt;
            document.getElementById(
                "Geek_h").innerHTML = txt;
        }
    </script>
</body>
</html>

Output:

Before Clicking On Button:

After Clicking On Button:

Example 2: This Example sets the alt Property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Input Image alt Property
    </title>
</head>
<body style="text-align:center;">
    <h1 style="color:green;"> 
      GeeksforGeeks 
    </h1>
    <h4>
      DOM Input Image alt Property
    </h4>
    <input id="myImage" formEnctype="application/x-www-form-urlencoded" 
           type="image" formtarget="#" src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png" 
           alt="Geeks_Logo" width="48" height="48" formMethod="post"
           autofocus>
    <br>
    <br>
    <button onclick="my_geek()">Submit </button>
    <h2 id="Geek_h" style="color:green;"> 
    </h2>
    <script>
        function my_geek() {
 
            // set Input Image alt Property. 
            var txt = document.getElementById(
                "myImage").alt = "submit";
            document.getElementById(
                    "Geek_h").innerHTML =
                "The alt Attribute was changed to " + txt;
        }
    </script>
</body>
</html>