HTML5: How to specify an alternate text for images?
Solution:
HTML Code:
<!DOCTYPE html><!-- Declaration specifying the document type -->
<html><!-- Opening tag for the root element of the HTML document -->
<head><!-- Opening tag for the document's header section -->
<meta charset="utf-8"><!-- Metadata tag specifying the character encoding of the document -->
<title>How to specify an alternate text for images</title><!-- Title of the HTML document -->
</head><!-- Closing tag for the document's header section -->
<body><!-- Opening tag for the document's body section -->
<form method="POST" action="https://www.w3resource.com/html-css-exercise/basic/solution/input-alt-answer-demo.php"><!-- Form element defining a form with method and action attributes -->
<!-- Form inputs -->
Name: <input type="text" name="name" size="30"><!-- Text input field for entering name -->
<input type="image" src="https://www.w3resource.com/html-css-exercise/basic/solution/input-altimages.jpg" alt="Submit" width="50" height="50"><!-- Image input field acting as a submit button, with alternate text "Submit" -->
</form>
</body><!-- Closing tag for the document's body section -->
</html><!-- Closing tag for the root element of the HTML document -->
Explanation:
- This HTML code demonstrates how to create a form with an image input field acting as a submit button.
- The form is configured with the method attribute set to "POST" and the action attribute set to the URL where the form data will be submitted.
- Within the form, there is a text input field for entering name.
- Additionally, there is an image input field (<input type="image">) that serves as a submit button, with its source specified by the src attribute and alternate text specified by the alt attribute.
Live Demo:
See the Pen input-alt-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
 |
 |
 |
 |
 |
| Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.