Posted by satyak
on June 19, 2006 at 8:12 AM PDT
I thought I knew web forms. Atleast I thought I have a working knowledge of how forms work. I didn't realize the number of surprizes I found on the way.
My quest started with an innocent inspiration. I like words and their origins. I wanted to put a look up for dictionary.com on my web log. The form was simple enough with a single text field that takes a word or a phrase and then look up its meaning from an online dictionary.
While playing with the idea, I have realized that when a form has a single text field, "enter" button is acting like a submit with no need for an additional button on the form. I thought that was quite nice. I have added an additional link for unsuspecting users to explicitly look up the meaning if they were not yet clued into the enter. I liked the outcome as the form blended so unobtrusively into the homepage that it does not even look like a form.
Looking back, I liked this form because
- I could enter a word and look up the meaning by simply hitting enter. No need to shift the focus.
- For new users the link worked like a button, and yet takes lesser space and looks more like a web page and not a diaglogue
Time passed. Another day and one more form. But this time the form has a few more fields and a couple of buttons. With stoic confidence I was certain I could work the same magic again. However hard I have tried I could not see why the form is not getting submitted on "enter". So I have started cutting the form down half at a time. When I have reached the single text field it started working. I kind of guessed at this point that at least one of the buttons have to be a submit button and that resolved the issue. But now I wasn't sure if it was a fluke with ie that the single field worked at all with out a submit button.
I decided to google (investigate) the mater. What followed was a string of surprises.
Nevertheless it continues to be a challenge to style text fields, buttons, and forms in general. Encoding of form data and submitting a form programmatically are large topics by themselves. I have included these items at the end for further exploration.
Rest of the article