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
More over actions resulting from both controls are rerouted through the same javascript function that looked up the meaning using a url. I was thrilled. "Wow, this is nice" I told myself.
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.
I came to know that indeed the single text field case is part of the spec. I came to know that it is possible to use images as input controls in forms. I also have realized some common patterns that one can use by intelligently navigating the onclick, onsubmit and action javascript functions. It is also possible to make input controls read only or disable them. It is possible to change the target of a form to paint the result in the same page or a new page etc. This article explores some of these topics in more detail in addition to providing a further reading in the references section.
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.
This article talks about the essentials and less exploited features of web forms for every day usage.
