HTML5: How to specify the URL of the image to use as a submit button?

Last update on February 09 2024 12:52:40 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html>
<head>
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title>How to specify the URL of the image to use as a submit button </title><!-- Sets the title of the document -->
</head>
<body>
<form method="post" <!-- Begins a form element with the method attribute set to "post", indicating that form data will be submitted via HTTP POST method -->
action="http://www.w3resource.com/html-css-exercise/basic/solution/input-src-answer-demo.php"><!-- Specifies the URL where the form data will be sent upon submission -->
   Name: <input type="text" <!-- Creates a text input field for entering the user's name. The name attribute is set to "fullname" to identify the input data on the server side -->
name="fullname"><br><!-- Provides a line break after the input field -->
<input type="image" <!-- Creates an image input field, which acts as a submit button -->
src="http://www.w3resource.com/html-css-exercise/basic/solution/input-altimages.jpg" <!-- Specifies the URL of the image to be displayed as the submit button -->
alt="submit" <!-- Specifies the alternate text for the image -->
width="75" <!-- Sets the width of the image to 75 pixels -->
height="75"><!-- Sets the height of the image to 75 pixels -->
</form>
</body>
</html>

Explanation:

The HTML document starts with a declaration of its type and version (<!DOCTYPE html>).
The <html> element encloses the entire HTML document.
The <head> section contains metadata about the document, including the character encoding (<meta charset="utf-8">) and the title of the document (<title>).
Within the <body> section, a <form> element is used to create a form for user input. The method attribute is set to "post", indicating that form data will be submitted via HTTP POST method, and the action attribute specifies the URL where the form data will be sent upon submission.
Inside the form, there's a <input> element with type "text" for entering the user's name. The name attribute is set to "fullname" to identify the input data on the server side.
Following the name input field, there's an <input> element with type "image". This creates an image input field, which acts as a submit button.
The src attribute of the image input field specifies the URL of the image to be displayed as the submit button.
The alt attribute provides alternate text for the image, which is displayed when the image cannot be loaded or is inaccessible.
The width and height attributes specify the dimensions of the image in pixels.
When the user clicks on this image, the form will be submitted to the specified action URL.

Live Demo:

See the Pen input-src-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page