Styling submit buttons or using links to submit a form?
Sending Form data to the server can be achieved in several ways, all of them with their pros and cons. It is especially tricky to create a form that has to be accessible, look great and allow for internationalisation (i18n). This post discusses the different options and offers a JavaScript that works around most issues.
The most accessible and least pretty way to submit a form is via a submit button.
Pros:
- they resize with the font settings
- their text content is determined by the value attribute, therefore it is is easy to localise them
Contras:
- You cannot style them consistently across browsers, and they cannot get rollover states 1
The other option is to use an input element with the type “image”, which enables you to use any image to submit the form
Pros:
- You have total control over the look and feel
Contras:
- Whilst applying a proper alternative text makes the images accessible to blind visitors, images don’t scale when the font size gets changed, which means they are not 100% accessible.
- i18n can become a maintenance issue, as you need to create (or automatically generate via the backend) images for each language.
Together with JavaScript, text links can be used to submit a form.
Pros:
- You have total control over the look and feel
- Text links scale with the font settings
- i18n is dead easy, as it is text content of the page, not even alternative text in attributes
Contras:
- requires JavaScript to work
Putting them all together
If you use a small JavaScript to check the document for submit buttons and dynamically replacing them with text links, you’ll get the best of both worlds:
- users without JavaScript will get normal submit buttons
- users with JavaScript styled text links.
“See the demonstration page”:http://icant.co.uk/sandbox/linkssubmit/ and try it alternately with JavaScript on and off.
The “script that replaces the submit buttons”:http://icant.co.uk/sandbox/linkssubmit/dtsl.js uses Unobtrusive JavaScript and allows you to define a special class to add to each of the replacement links. The links will also have the same ID as the original submit button and their value as text content.
Feel free to use it and report any issues/problems here.2
1 It is debateable if you should design your own form controls anyways, after all the users knows how forms looks in their environment and some browsers/operating systems offer rollover states for submit buttons.
2 One issue is that if you don’t have any submit or image button in the form you won’t be able to send the form by hitting the enter button on the keyboard. To counterwork this you might want to add another image button or alter the script to hide the submit buttons instead of replacing them.
[tags]webdevtrick[/tags]
January 4th, 2006 at 8:32 pm
January 3rd, 2006 at 4:50 pm
I’ve been using the exact same technique for a couple of months now. One of the major draw backs I’ve come upon with the technique is the spotty support for the display:inline-block CSS property. Using that CSS property would make the link’s behavior more like a form button so it would be easier to do things like putting a “Cancel” link next to the submit button like on Basecamp and such.
Come to think about it, I believe it was a little tricky to do onsubmit form validation. If I remember right, IE would only fire onsubmit if the submit tag was in the normal document flow.
January 4th, 2006 at 11:03 am
Nice write-up.
Just a small remark: image would scale if its dimensions were specified in ems, i.e.:
<input type="image" src="submit.gif" style="width: 5em; height: 1.5em;" alt="[submit]" />April 18th, 2006 at 6:32 am
hey chris,
nice work! went through your script … is it true, the script just ignores the classes and is repleacing avery submit-buttons? how can i alter the script for multiple forms?
need your help! ;-)
thanks man,
jo
July 17th, 2006 at 8:56 pm
here is my suggestion :)
use the input image but provide no src. instead just provide the text you would like to have as your link. this is similar as providing an alt to an img. you will see no image just text.
now you only have to use some css to style it to look more like an link, it even resizes itself ;)
sample:
August 1st, 2006 at 7:47 am
My apologies in advance for this comment, but I’m heavily annoyed right now after ploughing through a gazillion web pages. Your pages seemed to offer what I was looking for, and then it turns out: your solution doesn’t work with multiple forms on a page. AAAARGH!
You obviously realized this yourself, because you added a comment to that effect inside the JavaScript code. Why didn’t you write the code in a generic way, so people like Jo (above) and me can use your solution without having to learn JavaScript first? You took the effort to share your solution with everyone, why didn’t you go the extra mile?
Again, I’m sorry for this feedback; it’s just that I’ve been trying to find a solution for this problem for a while, and setback after setback just kinda takes it out of me. My resilience has its limits, and it seems I’ve reached them. :-(
August 1st, 2006 at 8:19 am
JJ, I fixed it now for several forms. By the way, it is just very bad style to tell someone who “goes the extra mile” to give out scripts like these for free that he should have done a better job in the first place. Especially when yourself can’t be bothered to learn about how the whole thing works.
As you may have realised, I was a little busy “writing a book”:http://www.beginningjavascript.com and having a real job…
This is a hobby, and I get no benefit from it but feedback. We all are frustrated, but blaming other people for your frustrations is not an incentive for them to do anything for you.
August 1st, 2006 at 3:54 pm
Although I do still feel it’s a matter of professional pride to Get It Rgiht The First Time (how long did it take you, this morning?), I do apologize for the rest of my previous posting.
Thank you for sharing AND correcting. Congratulations on, and good luck with, your new book. I’ll check it out next time I’m in the bookstore!
August 16th, 2006 at 1:55 pm
Why does it flash an input box below the button? It seems to do it on this example and the one’s I have created.
http://www.mailmypost.com/registerThanks.php
Is it supposed to happen?
August 16th, 2006 at 2:46 pm
Nice scrip.t I’ve a suggestion though. Sometimes you would only want to do this to some buttons, so maybe it could be turned on/off by applying a class.
Also, in many cases you can style a submit button with CSS to get rid of the border & background and it will look quite like a normal link.
September 12th, 2006 at 7:14 pm
Great work. This is exactly what I have been looking for for my redesign.
February 27th, 2007 at 6:22 am
Chris when are you going to release your book ?
March 8th, 2007 at 7:09 pm
For those wondering why an input box appears from time to time, or flashes up before going to the form, its because the createElement(‘input’) function has the options set for input block, but not set to type hidden. Change it to hidden as shown below and it will no longer show up for you.
sendForm:function(e){
dtsl.cancelClick(e);
var t=dtsl.getTarget(e);
var f=t.f;
var newel=document.createElement(‘input’);
newel.type=”hidden”;
newel.name=t.id;
newel.value=t.innerHTML;
f.appendChild(newel);
July 5th, 2007 at 2:04 am
You could also use css to style a button and make it appear as text like this:
font-weight: bolder;
text-decoration:none;
background-color: #FFFFFF;
border-width: 0;
cursor: pointer;
width: 60px;
padding-top: 0px;
margin: 0;
July 29th, 2007 at 3:42 am
hi, i just encountered this: the script / method doesnt work within a .php in ie6 or opera (pc).
April 7th, 2008 at 12:16 pm
How can we submit a form without a submit button in php
May 3rd, 2008 at 11:22 am
[...] Using Javascript to do a dynamica image replacement. [...]
June 15th, 2009 at 8:20 pm
The links does not work with Spry. Any ideas?
February 20th, 2010 at 10:23 pm
I have been working this issue for some time. Thanks for the post