In this article, we will learn how to create an image that acts as a submit button i.e. whenever we click on an image in the form, it will be automatically submitted to the server. The default type of <input> type attribute is text. Here, we use a simple approach to complete the task.
Syntax
<input type = "image">
Attribute Value:
- image: It is used to define an image as the submit button.
Features:
- The input element does not accept a value attribute.
- The image path is defined in the src attribute.
- The input element is supported by various common attributes.
Approach:
- Firstly, create an HTML document that contains an <input> tag.
- use the type attribute with the <input> tag.
- set the type attribute to value “image“.
- You can also use the src attribute which contains the URL of the image.
Example: This example illustrates the use of the image button in the input type to submit the login details in HTML Form.
HTML
<!DOCTYPE html> <html>
<body style="text-align: center">
<h1 style="color: green">
GeeksForGeeks
</h1>
<h2>
How to create an image that act
as a submit Button using HTML5?
</h2>
<form>
Email Address:
<input type="email" placeholder="Enter your email Address" />
<br><br>
Password No.:
<input type="password" placeholder="Enter password " />
<br><br>
<input type="image" src=
height="80px" width="110px" alt="submit" />
</form>
</body>
</html>
|
Output:
Example: In this example, we have used the input type as an image for the newsletter subscription button in HTML.
HTML
<!DOCTYPE html> <html>
<body style="text-align: center">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h4>Subscribe to GeeksforGeeks Newsletter</h4>
<p>
The best of content served at the
convenience of your fingertips.
</p>
<form>
Name:
<input type="text" placeholder="Name"
name="name" required />
<br><br>
Email:
<input type="text" placeholder="Email address"
name="mail" required />
<br><br>
<input type="checkbox" checked="checked"
name="subscribe" />
Daily Newsletter
<br><br>
<input type="image" src=
height="80px" width="90px" value="Subscribe" />
</form>
</body>
</html>
|
Output: