Database Journal: The Knowledge Center for Database Professionals

find a web host with:
CGI Access DB Support NT Servers UNIX Servers Telnet Access advanced search

internet.com Internet News Internet Investing Internet Technology Windows Internet Tech. Linux/Open Source Web Developer ECommerce/Marketing ISP Resources ASP Resources Wireless Internet Downloads Internet Resources Internet Lists International EarthWeb Career Resources Search internet.com Advertise Corporate Info Newsletters E-mail Offers

internet.commerce Be a Commerce Partner

How To Create A 'Submit' Button of Your Own Design

Dear Dr. Website®: I'm working on a Web site for a client who wants to use their own buttons for the "Submit" and "Reset" buttons on a form. Is this possible?

There is a fairly reliable workaround for using an image to replace the visual appearance of a "Submit" button, but this trick doesn't apply to the "Reset" function. Here's how it works:

When you create a button for a Web form, you use the <INPUT> tag to specify the button's name, appearance, and what kind of data is contained. This is largely accomplished through the <INPUT> tag's TYPE attribute, which specifies the button's purpose.

You create a standard "Submit" button by specifying TYPE=SUBMIT in the <INPUT> tag. Similarly, you create a standard "Reset" button by indicating TYPE=RESET in another <INPUT> tag, as shown below:

<INPUT TYPE=SUBMIT VALUE="Send it in!">
<INPUT TYPE=RESET VALUE="Reset">

<INPUT TYPE=IMAGE
SRC="image/buyitnow.gif" NAME="purchase">

In addition, the browser will add two parameters to mark the x and y coordinates of where the image was clicked. These coordinates are stored as parameters named name.x and name.y, where "name" is the text supplied in the NAME attribute.

You can create any kind of image you like--but for usability's sake, it should have text indicating that it should be pressed to submit the form. Keep in mind that many users will be accustomed to "Submit" buttons displaying a certain way in their browsers, and may have difficulty in recognizing your custom image as a "Submit" button. Additionally, if your users have image loading turned off, they will likely fail to recognize the broken image icon as a "Submit" button, although it will likely work as intended if they happen to click it.

However, there's no way to replicate the TYPE=RESET function using TYPE=IMAGE to restore a form to its original state and erase any entered data. You could have the server respond to a TYPE=IMAGE submission by reloading the form, but that's really not the same function as resetting a form.

Trailing Slashes on URLs

Dear Dr. Website®: I have a bet riding on this--does it matter if you end a URL such as http://www.mycompany.com/news/ with a slash or not?

The trailing slash on a URL distinguishes between URLs that point to a directory (like http://www.mycompany.com/news/) and URLs that point to a file or an executable script. If you point your browser at a directory URL without adding the trailing slash--say, http://www.my.company.com/news -- the browser will first request a file with that name. When the server fails to locate a file by that name, it returns a redirection message to the browser saying the directory should be requested instead. Your browser will then send a second request specifically asking for a directory.

Therefore, Web authors who end all the directory URLs in their hyperlinks with a trailing slash at the end can actually reduce the load placed on their servers. Users who follow well-formed hyperlinks won't send extraneous requests to the server, which will reduce traffic in the end.

One exception is URLs for top-level domains. If you ask for a domain URL without the slash, like http://www.somecompany.com, it's obvious the main index page is being requested, and the browser won't be asked for a second request. It's still good form, though, to include the trailing slash for a top-level domain's URL.

Refresh Daily
Join Editor-in-Chief David Fiedler and find truth, justice, and a clue or two.

[ Site Map ] ActiveX / VBscript Animated GIF Archive Browsers CGI / Perl Database Connectivity Design / Graphics E-Commerce HTML-Advanced: DHTML, CSS HTML / Site Authoring Tools Intranet/Groupware Java JavaScript Multimedia: Audio / Video / Streaming Technologies Opinions Refresh Daily: Editorial Column Security Servers & Server Tools Site Design / Graphics Site Management / Marketing / Log File Analysis Tutorials VRML / 3D XML