Submitting a Form Using an Image Tag
(Page 1 of 8 )
There are a number of ways to make the forms on your website more user friendly. This article will explain one way of doing this, which eliminates a page reload and replaces it with an image generated on the server.
Forms on the Web are somewhat user unfriendly. One of the worst parts of using a form on a website is page reloads. Many times, after submitting a form, you are taken to a confirmation page, which provides links to go somewhere else rather then allowing you to submit the information and get on with your life.
This article will demonstrate a way to eliminate a step by getting rid of the confirmation page and replacing it with a simple image generated by the server. There are no page loads; just a little Javascript, server side code and an HTML "img" tag.
Image Generation
There are many server side Web application platforms that provide a way to generate graphics "on the fly" either built into the application language or via some sort of extension.
Most of these systems work with HTML in a very simple manner. Rather than using a path to an image in the src attribute of an image tag, the path to a coded page is used. This coded page (such as a PHP or ASP page) generates the graphics, assembles the proper HTTP headers and then sends the response as an image rather than an HTML document.
<img src="img_generate.php">
Many times this is used to display bar graphs, pie charts or other graphics assembled using information in a database.
Since we are sending the request to a Web application, there is nothing that says that we can't send more than just the path to the application.
In a standard GET style HTTP request (like a page request), a query string is used to send additional information to the server. A query string is made up of a "?" character followed by one or more name/value pairs separated by an "&", and encoded to escape characters such as spaces that are not allowed in URLs.
http://www.mydomain.com/products.asp?cat=lawnGard&subcat=lawmowers
A query string can be appended to any URL. As long as the target of the request is able to process and use the query string, then we have something useful. A static image of course has no use for query strings; a Web application can do quite a lot with one, however.
Next: Submitting a Form >>
More HTML Articles
More By Chris Root
