How to create an image acting as a submit button using HTML5 ?
Last Updated :
09 Oct, 2021
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:
Share your thoughts in the comments
Please Login to comment...