How to create an image acting as a submit button using HTML5 ?
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:
Please Login to comment...