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...