Submitting Forms with Links

mirror of http://tom.me.uk/scripting/submit.asp

Accessible scripting index | tom.me.uk home

Forms have been around for years. They are a great way of getting information from the user, and sending it to the server. But recently web developers have got into the nasty habit of using script functions to submit forms - and not providing a simple submit button alternative.

The Problem

Using links just to submit a form is a very poor usage of them (see misusing links), such as:

<a href="javascript:document.formName.submit();">Submit Form</a>

<a href="#" onclick="document.formName.submit();">Submit Form</a>

The Solution

There are several solutions to this one, some easier than others...

Make a submit button look like a link

This is a very nice solution, it makes the form work on all browsers regardless of scripting capabilities. Add this CSS to the <head> section in your page (please note however that the value "hand" for "cursor" is not standard CSS, but is required for IE/win pre-v6):

<style type="text/css">

.submitLink {
   color: #00f;
   background-color: transparent;
   text-decoration: underline;
   border: none;
   cursor: pointer;
   cursor: hand;
}

</style>

You can alter the color property to match the color of your links. Then for your submit button, use:

<input type="submit" class="submitLink" value="Submit Form">

In your browser, this is rendered as:

This is the most elegant and accessible option - the submit buttons works on all browsers that support forms, and looks like a link on CSS-compatible browsers.
Using an image

If you are currently using an image surrounded by a javascript-triggering link, you can simply replace it with:

<input type="image" src="submitImage.png" alt="Submit Form">

This works on pretty much all platforms (although with a few exceptions), and displays an image or the alt text to click.
Providing an alternative submit button

If the worst comes to the worst and none of the above suit you, simply add:

<noscript><input type="submit" value="Submit Form"></noscript>

Which gives non-scripting users a nice, normal submit button.

Submitting Forms with Links

mirror of http://tom.me.uk/scripting/submit.asp

The Problem

The Solution

Make a submit button look like a link

Using an image

Providing an alternative submit button