HTML Image Input Generator

Create an HTML <input> Image Button Online

The HTML Image Input Generator creates an <input type="image"> control: a submit button displayed with an image. Set its image source, form name, alternative label, dimensions, and autofocus state; the preview, HTML output, and C# output update together.

Unlike an <img> element, an image input activates form submission. When a user clicks the displayed image, the browser can submit the selected x and y coordinates with the form data.

Create an HTML Image Input in C#

The C# panel shows how to create the configured image submit button with Aspose.HTML for .NET . The generated code follows this workflow:

1. Create an HTMLDocument and an HTMLInputElement with CreateElement() .
2. Set its Type to image, then assign the source, name, and non-empty alternative label.
3. Set the selected dimensions and optional autofocus attribute.
4. Add the control with AppendChild() and write image-input.html with Save() .

Configure the image button first, then copy the updated C# code into your .NET project.

HTML Image Input Generator FAQ

1. How does <input type="image"> differ from <img>?

An image input is a form submit button whose visual content comes from an image. An <img> embeds an image in document content and does not submit a form when activated.

2. What values does an image input submit?

It submits the selected image coordinates as two entries derived from the control name. For example, a control named checkout produces checkout.x and checkout.y values when the user selects a point on the image.

3. Why must the alt attribute contain text?

The text is the button’s label for users and user agents that cannot use the image. Describe the action, such as “Log in” or “Search,” rather than describing the image’s appearance.

4. Why does the image button not submit anything in the preview?

The generated control must have a form owner before activation can submit data. Place the copied input inside a <form> or associate it with a form when integrating it into the target page.

5. Should I enable autofocus for the image button?

Use it sparingly. Automatically moving focus can disorient keyboard and assistive-technology users, and a document should not contain competing autofocus targets.

Get Started with Aspose.HTML for .NET API

Install Aspose.HTML for .NET from NuGet with the .NET CLI:

dotnet add package Aspose.HTML

You can also use the NuGet Package Manager UI or run Install-Package Aspose.HTML in the Package Manager Console. See the installation guide for setup details, or request a temporary license to evaluate the API without evaluation limitations.