HTML <input type="image"> - GeeksforGeeks (2024)

Table of Contents

Syntax Attribute Value Features Supported Browsers Please Login to comment... Similar Reads Thank You! FAQs

Courses
Tutorials
- Data Structures & Algorithms
- Python
- ML & Data Science
  - Machine Learning
  - Data Science Tutorial
  - Data Science Packages
    - Pandas Tutorial
    - NumPy Tutorial
  - Data Visualization
  - Data Analysis
  - Deep Learning
  - NLP Tutorial
  - OpenCV Tutorial
  - Interview Questions
- System Design
- Interview Corner
- Languages
  - C
  - C++
  - Java
  - Python
  - R Tutorial
  - C#
  - SQL
  - Scala
  - Perl
  - Go Language
- Web Development
  - HTML
  - CSS
  - JavaScript
  - TypeScript
  - ReactJS
  - Node.js
  - PHP
  - AngularJS
  - jQuery
  - Web Development Using Python
  - Web Design
  - 100 Days of Web Development
- CS Subjects
- DevOps And Linux
- School Learning
- GATE
- GeeksforGeeks Videos
Jobs
- Get Hired: Apply for Jobs
- Corporate Hiring Solutions
- Filtered Jobs
Practice
- All DSA Problems
- Problem of the Day
- Company Wise Coding Practice
- GfG SDE Sheet
- Practice Problems Difficulty Wise
- Language Wise Coding Practice
- Curated DSA Lists
Contests

Open In App

Last Updated : 20 May, 2024

Summarize

Comments

Improve

Suggest changes

Like Article

Save

Report

The HTML <input type=”image”> element defines an image as a submit button within a form. When the image is clicked, the form is submitted, similar to a regular submit button. It allows for more visually appealing form submissions, as the image can serve as the button instead of a plain text or styled button element.

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.

Example: In this example, we will use the HTML <input type=”image”> element to create an image-based submit button for a form.

HTML

<!DOCTYPE html><html><head> <title> HTML Input Type Image </title></head><body> <h2>HTML &lt;input type="image"&gt;</h2> <form id="#"> <label for="name">Enter Name:</label> <input type="text" id="name" placeholder="Enter Name..." /> <br><br> <label for="email">Enter Email:</label> <input type="email" id="email" placeholder="Enter Email..." /> <br><br> <label for="mobile">Enter Contact:</label> <input type="tel" id="mobile" placeholder="Enter Phone Number..." /> <br><br> <input type="image" src="https://media.geeksforgeeks.org/wp-content/uploads/20240519103834/GFG-Logo.png" height="40px" width="150px" alt="GFG" /> </form></body></html>

Output

Example 2: In this example, we will make a login form & use the image as an input type to submit the form.

HTML

<!DOCTYPE html><html><head> <title> HTML Input Type Image </title></head><body> <h2>HTML &lt;input type="image"&gt;</h2> <form action="#"> <label for="email">User Id:</label> <input type="email" placeholder="Enter Email..." /> <br><br> <label for="password">Password:</label> <input type="password" placeholder="Enter Password..." /> <br><br> <input type="image" src="https://media.geeksforgeeks.org/wp-content/uploads/20240519103834/GFG-Logo.png" height="40px" width="130px" alt="submit" /> </form></body></html>

Output

Supported Browsers

Chrome 1
Edges 12
Firefox 1
Opera15
Safari1

ManasChhabra2

Improve

HTML <input type="hidden">

HTML <input type="month">

Please Login to comment...

Similar Reads

Difference between <input type='button' /> and <input type='submit' />

In HTML, <input> elements are widely used to create various form controls. Two common types of <input> elements used for buttons are <input type='button' /> and <input type='submit' />. While both appear similar at first glance, they serve different purposes and have distinct behaviors when used in web forms, <input type=

3 min read

Which input type is used to hide the input field to be displayed in HTML Form ?

The form tag is generally used to create forms for entering data. We can use different form tag attributes like text boxes, text area, checkboxes, radio buttons, buttons, dropdown list, etc. to collect data from the users. We need to use the HTML <input type=”hidden”> type for hiding the input field. Using this attribute, the input field will

1 min read

HTML | DOM Input Image type Property

The Input Image type Property in HTML DOM is used to returning the which type of form element an image field is. Syntax: ImageObject.type Return Value: It returns a string value which represents the type of form element the Image field is. Below Example returns the Image Type Property. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html

1 min read

HTML | DOM Input Hidden type Property

The DOM input Hidden type Property is used for returning the type of form element the hidden input field is. The Input Hidden type returns a string value which represents the type of form element the hidden input field is.Syntax: hiddenObject.type Return Values: It returns a string value which defines the type of form element the input hidden field

1 min read

HTML | DOM Input Date type Property

The Input Date type property is used for returning the type of form element the date field is. The Input Date type property returns a string that represents the type of form element the date field is. Syntax: inputdateObject.type Return Values: It returns a string value that represents the type of form element of the date field. The below program i

1 min read

HTML | DOM Input Datetime type Property

The Input Datetime type property is used for returning the type of form element the datetime field is. The Input Datetime type property returns a string that represents the type of form element the datetime field is. Browsers such as Safari and Opera return "datetime" as a result whereas browsers such as Internet Explorer, Firefox, and Chrome retur

2 min read

HTML | DOM Input DatetimeLocal type Property

The Input DatetimeLocal type property is used for returning the type of form element the datetimeLocal field is. The Input DatetimeLocal type property returns a string that represents the type of form element the datetimeLocal field is. Browsers such as Safari and Opera return "datetime-local" as a result whereas browsers such as Microsoft Edge, Fi

2 min read

HTML | DOM Input Checkbox type Property

The Input Checkbox type Property in HTML DOM is used to return that which type of form element the checkbox is. For a checkbox input field, this Property was always return only "checkbox". Syntax: checkboxObject.type Return Value: It returns a string value which represents the type of form element the checkbox. Example: This example returns the Inp

1 min read

HTML | DOM Input Password type Property

The DOM Input Password type Property is used for returning which type of form element a password field is. This property will always return" password" for an input password field. Syntax: passwordObject.type Return Value: It returns a string value which represent the type of form element the password field is. Below program illustrates the Email ty

1 min read

HTML | DOM Input Email type Property

The Input Email type property in HTML DOM is used to return the type of form element of the Email field. It always returns an email for an Input Email Field. Syntax: emailObject.type Return Values: It returns a string value that represents the type of form element of the Email field. The below program illustrates the Email type property in HTML DOM

1 min read

HTML | DOM Input Reset type Property

The Input Reset type Property in HTML DOM is used to return the type of form element of the reset field. It always returns the "reset" for an Input reset field. Syntax: resetObject.type Return Value: It returns a string value that represents the type of form element the Input reset field is. Below program illustrates the reset type property in HTML

1 min read

HTML | DOM Input Number type Property

The DOM Input Number type Property in HTML DOM is used to return the type of form element of the number field. It always returns the "number" for an Input number field. Syntax: numberObject.type Return Values: It returns a string value which represents the type of form element of the Number field The below program illustrates the number type proper

1 min read

HTML | DOM Input Search type Property

The DOM Input Search type Property in HTML DOM is used to return the type of form element of the search field. It always returns the text for an Input search field. Syntax: searchObject.type Return Values: It returns a string value which represents the type of form element of the search field The below program illustrates the search type property i

1 min read

HTML | DOM Input Range type Property

The DOM Input Range type Property in HTML DOM is used for returning the which type of form element the slider control is. All the Browser should return "range". whereas the Internet Explorer always returns the "text" instead of "range". Syntax: rangeObject.type Return Value: It returns a string value which represents the type of form element the sl

1 min read

HTML | DOM Input URL type Property

The DOM Input URL type Property in HTML DOM is used for returning the Which type of form element the URL field is. This Property will always return "URL".Syntax: urlObject.type Return Value: It returns a string value which represent the type of form element the URL field is. Example: This Example illustrates how to return the type Property. C/C++ C

1 min read

HTML | DOM Input Week type Property

The DOM Input Week type Property is used for returning which type of form element a week field is. Syntax: weekObject.type Return Value: It returns a string value which represent the type of form element the week field is. Below program illustrates the Week type property: Example: Returning the type of form element the Week field is. C/C++ Code

1 min read

HTML | DOM Input Month type Property

The DOM Input Month type Property is used for returning which type of form element a Month field is. Syntax: monthObject.type Return Value: It returns a string value which represent the type of form element the Month field is. Below program illustrates the Month type property: Example: Returning the type of form element the Month field is. C/C++ Co

1 min read

HTML | DOM Input Radio type Property

The DOM Input Radio type Property in HTML DOM is used to return the type of form element of the Radio Button. It always returns the "radio" for an Input Radio Button. Syntax: radioObject.type Return Values: It returns a string value which represents the type of form element the input radio field is. Below program illustrates the Radio type property

1 min read

HTML | DOM Input Time type Property

The DOM Input Time type Property in HTML DOM is used to return the type of form element of the input Time Field. All the Browsers always returns "time" instead of Internet Explorer and Firefox which returns "text".Syntax: timeObject.type The below program illustrates the time type property in HTML DOM:Example: This example returns the type of form

1 min read

HTML | DOM Input Button type Property

The DOM Input Button type Property in HTML DOM is used for returning the which type of form element containing the Input Button field is. This Property will always return "Button".Syntax: buttonObject.type Return Values: It returns a string value which represents the type of form element a input button field is. Below program illustrates the use of

1 min read

HTML DOM Input Color type Property

The DOM Input Color type Property in HTML DOM is used for returning which type of form element containing the color picker is. This property will always return "color". Syntax: colorObject.type Return Value: It returns a string value that represents the type of form element the input color field is. The below Program illustrates the use of the Inpu

1 min read

HTML | DOM Input FileUpload type Property

The Input FileUpload type Property is used in HTML DOM to return the type of form element the file upload button is. This property will always return "file" for a file upload button. Syntax: fileuploadObject.type Return Value: It returns a string value that represents the type of form element the file upload button is. Examples: C/C++ Code <!DOC

1 min read

HTML | <input type="datetime-local">

The HTML <input type="datetime-local"> is used to define a date and time control. The value must include the year, month, day and time. Syntax: <input type="datetime-local"> Example: <!DOCTYPE html> <html> <head> <title> HTML input type datetime-local </title> <style> h1 { color: green; } body { text-

1 min read

How to specify the type of an input element using HTML ?

In this article, we will specify the type of an input element using HTML. The HTML <input> type attribute is used to specify the type of <input> element to display. The default type of <input> type attribute is text. Syntax: <input type="value"> Attribute Values: button: It is used to define a clickable Button in a Document.

4 min read

Which input type is used to choose the date in HTML ?

In this article, we will learn how to choose the date from the calendar on the webpage. As we know that HTML 5 introduced many inputs types for the better functionality of the form. The <input type="date"> input type is used to choose the date in HTML. It is used to develop input fields that tend the user enters a date, or use a textbox that

1 min read

HTML DOM Input Tel type Property

The DOM Input tel type property in HTML DOM is used to return the type of form element of the input tel field. It always returns the "tel" for an Input tel field. Syntax: telObject.typeReturn Values: It returns a string value that represents the type of form element of the tel field. The below program illustrates the input tel type property in HTML

1 min read

HTML Input Type

HTML Input Element has various types that play an important role in creating HTML Forms, and the element is efficient in collecting user data and adding interactivity to web pages. These elements provide the feature to create an interactive web page. In the Input Element, there is an attribute type having different values that help to create the fo

9 min read

HTML DOM Input Text type Property

The Input Text type Property in HTML DOM is used to return the type of form element of the text field. It always returns the text for an Input text field. Syntax: textObject.typeReturn Value: It returns a string value that represents the type of form element the input text field is. Below program illustrates the text type property in HTML DOM: Exa

1 min read

How to Change input type="date" Format in HTML ?

The <input> element with type="date" is used to allow the user to choose a date. By default, the date format displayed in the input field is determined by the user's browser and operating system settings. However, it is possible to change the format of the date displayed in the input field using HTML. JavaScript can be employed to enforce a s

4 min read

HTML DOM Input Submit type Property

The Input Submit type Property in HTML DOM returns the type of form element of the submit field. It always returns the submit for an Input submit field. Syntax: submitObject.typeReturn Values: It returns a string that represents the type of form element an input submit field is. Example: This example returns the type of form element of the submit

1 min read

Article Tags :

Trending in News

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); return; } var improvement_reason_html = ""; for(var comment of commentArray) { // loop creating improvement reason list markup var comment_id = comment['id']; var comment_text = comment['suggestion']; improvement_reason_html += `

${comment_text}

`; } $('.improvement-reasons_wrapper').html(improvement_reason_html); $('.improvement-bottom-btn').html("Create Improvement"); $('.improve-modal--improvement').hide(); $('.improvement-reason-modal').show(); }, error: function(e){ $('.spinner-loading-overlay:eq(0)').remove(); // stop loader when ajax failed; }, }); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ $('.improvement-reason-modal').hide(); } $('.improve-modal--improvement').show(); }); function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `

${suggest_val}

`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = `

Thank You!

Your suggestions are valuable to us.

You can now also contribute to the GeeksforGeeks community by creating improvement and help your fellow geeks.

`; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('

'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('

'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.improvement-reason-modal').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); });

FAQs

HTML <input type="image"> - GeeksforGeeks? ›

The HTML <input type=”image”> element defines an image as a submit button within a form.

Read On ›

What is the input type image in HTML? ›

Definition and Usage. The <input type="image"> defines an image as a submit button. The path to the image is specified in the src attribute.

Discover More Details ›

How to input an image in HTML code? ›

In order to put a simple image on a web page, we use the <img> element. This is a void element (meaning, it cannot have any child content and cannot have an end tag) that requires two attributes to be useful: src and alt . The src attribute contains a URL pointing to the image you want to embed in the page.

How to display user input image in HTML? ›

HTML Demo: <input type="image">

<p>Sign in to your account:</p>
<div>
<label for="userId">User ID</label>
<input type="text" id="userId" name="userId" />
</div>
<input type="image" id="image" alt="Login" src="/media/examples/login-button.png" />

Aug 13, 2024

See Details ›

How to use image tag in HTML with example? ›

An example of an <img> tag in HTML is: <img src="image. jpg" alt="Description">. This code embeds an image named "image. jpg" with the alternative text "Description".

Find Out More ›

What is the best image type for HTML? ›

GIF is a good choice for simple images and animations, although converting full color images to GIF can result in unsatisfactory dithering. Typically, modern content should use PNG for lossless and indexed still images, and should consider using APNG for lossless animation sequences.

Tell Me More ›

Which HTML is used to insert an image? ›

The <img> tag is used to embed an image in an HTML page.

Show Me More ›

How to insert image data in HTML? ›

In order to insert an image in HTML from a folder you will need to use the <img> tag. The src attribute is used to specify the location of the image. You can link to an image using either an absolute or relative file path.

Explore More ›

How do I insert an image into text in HTML? ›

To insert an image in HTML, use the image tag and include a source and alt attribute. Like any other HTML element, you'll add images to the body section of your HTML file. The HTML image element is an “empty element,” meaning it does not have a closing tag.

Why is the image not showing in HTML? ›

There are several possible reasons why your images are not showing up on your pages as expected: The image file is not located in the same location that is specified in your IMG tag. The image does not have the same file name as specified in your IMG tag. The image file is corrupt or damaged.

Show Me More ›

How do I add an image to an input type file? ›

Our markup will consist of a form with two input elements.

<form class="custom__form">
<p>Add image</p>
<div class="custom__image-container">
<label id="add-img-label" for="add-single-img">+</label>
<input type="file" id="add-single-img" accept="image/jpeg" />
</div>
<input.
type="file"

More items...

Jan 7, 2022

Read The Full Story ›

How do I upload an image to a user in HTML? ›

Uploading an Image Using The File API

Developers can implement this feature in two ways: An input element with a type="file" to let the user choose one or more files from their device storage. Using the HTML Drag and Drop API to allow users to upload files to a web application.

See Details ›

How do I link an image in HTML? ›

To add an image to your web page use an img tag. This tag is a bit different from an a tag in that it does not have an opening and closing tag. Now we have an image we need to turn it into a link. To do that we need to add a <img> tag inside the <a> tags creating a linking image in HTML.

Get More Info Here ›

How to load an image in HTML? ›

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag is empty, it contains attributes only, and does not have a closing tag.

How to give an image name in HTML? ›

To put a name on top of an image in code, you can use HTML and CSS. First, you'll need to add an image tag in your HTML code with the 'src' attribute pointing to your image file. Then, you can create a div element or a paragraph element containing the name you want to display on top of the image.

How to insert an image in HTML using Notepad? ›

You have to use <img> tag for inserting image into webpage. The 'src' is used for defining the path of the image. And if the image is not available then the alternative 'alt' is used to display a text or image. In above example if the image is not found then the text Image will be displayed.

View Details ›

What is the input type in HTML? ›

The <input> tag specifies an input field where the user can enter data. The <input> element is the most important form element. The <input> element can be displayed in several ways, depending on the type attribute. The different input types are as follows: <input type="button">

Which is the image input device? ›

Answer: The input device that allows putting images into a computer is Scanner. Explanation: What are Input devices?

Learn More ›

What is inline image in HTML? ›

Inline images are images that appear inside a block of HTML text. The simplest way to add an inline image in HTML is to insert the img tag into the text exactly where you want the image to appear, as in Figure 30.1.

Discover More Details ›

What is image source in HTML? ›

The <img> src attribute is used to specify the URL of the source image. It points to the location of the image file that the browser should display on the webpage.

Show Me More ›