6-Apr-09 (Created: 6-Apr-09) | More in '00.05-Articles'

Vagaries, vicissitudes, and occasional pleasures of submiting a form

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

  1. I could enter a word and look up the meaning by simply hitting enter. No need to shift the focus.
  2. 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.

Basic anatomy of a form


<form name="FormObject" action="some-server-side-action-url">
<p>Field1 <INPUT type="text" name="field1" size="10"/>
<p>Field2 <INPUT type="text" name="field2" size="10"/>
<p>submit <INPUT type="submit" name="submitbutton" value="submit" size="10"/>
</form>

The action attribute of a form instructs the web browser to submit the url to the web server. The values of field1 and field2 are submitted as arguments. The submit action then is equivalent to


http://webserver/some-server-side-action-url?field1=field1-value&field2=field2-value

A test bed for your form

While working with forms it is useful to have a small test bed to experiment with forms. You can use the following code segment to get you started.

Notice how a javascript function is used as an action to test this out locally with out going to the server. Obviously I have jumped a head to tell you that javascript functions are allowed as action targets.


<html>
<script>
function test()
{
	alert('hello');
}
</script>
<body>
<form name="FormObject" action="javascript:test()">
<p>Field1 <INPUT type="text" name="field1" size="10"/>
<p>Field2 <INPUT type="text" name="field2" size="10"/>
<p>submit <INPUT type="submit" name="submitbutton" value="submit" size="10"/>
</form>
</body></html>

The multifaceted "input" tag

Here are commonly used input "type" tags

text
button
submit
hidden
password
radio
checkbox

Less frequently used

image
file
reset

Non input tags form related tags

textarea
select

It is interesting to know that image is one of the types.

For more details on the input tags you can read the w3c schools. You can also see sample code for some common form examples.

Of all the tags perhaps the image is least utilized and is worth exploiting.

Additional useful attributes of input tag

disabled
readonly (For text fields only)

textarea is not an input tag

unlike "text" type, a textarea is not part of an "input" tag. Textarea is a tag by itself.

But "image" is...

Here is the above form with an image as a submit button and a text area


<html>
<script>
function test()
{
	alert('hello');
}
</script>
<body>
<form name="FormObject" action="javascript:test()">
<p>Field1 <INPUT type="text" name="field1" size="10"/>
<p>Field2 <INPUT type="text" name="field1" size="10"/>
<p>Field3 <textarea cols=20 rows=10></textarea>
<p>submit 
    <input type="submit" name="submitbutton" value="submit" size="10"/>
    <input style="border:1px solid gold;" 
       type="image" 
	   src="http://mathworld.wolfram.com/images/gifs/go-game.jpg" 
	   width="200"/>
</p>
</form>
</body></html>

The target of a form

You can specify a form target as one of the following

_blank (goes to new window)
_self (same window)
_parent (parent window or frameset)
_top (top window)

This setting is useful if you would like to see the output of the form submission in a window other than the default current window. For instance for such things as dictionary look ups you may want to keep the old context while redirecting the meaning to a small new popup window.

Important Attributes of a form

method (get,post)
target (_blank,_self,_parent,_top)
name
onsubmit (event)
onreset (event)

OnSubmit

It is also important note the important events of a form

onsubmit
onreset

If onsubmit returns a true, the form will be submitted otherwise it will be cancelled.

OnClick, OnSubmit, and Action

Intuitively buttons represent explicit actions for a user. It is not uncommon to represent these actions as javascript functions tied to "onclick". Inside the function one can do the following

1. validate fields
2. gather fields one needs
3. fire a url by changing the document's location

In this approach a form is never submitted. So "OnSubmit" is never called. This approach works well for simple forms with a few fields. The appeal is simplicity. Even for a simple form the drawback is that a user has to explicitly navigate to the button and then use either a click or enter while on that button to invoke this action. One may want to invoke the same function upon an "enter" while the focus is on the form.

One way to accomplish this is to turn the button into a "submit" button from a regular "button" type. This will invoke the function upon "enter". But this will also invoke OnSubmit and actually submits the form. So if "onclick" function fires of a url, then a subsequent url is fired of because of the implicit "submit". So in a sense there is a double submit: once in the onlick and once as a result of the submit.

This can be resolved by removing the "onclick" function and using that function instead as a target of the form action. The following two examples illustrates this.

The OnClick version


<script>
function myAction()
{
	var field1 = document.myform.field1.value;
	var url = "/webapp/someservlet?arg1=" + field1;
	document.location=url;
}
</script>
<form name="myform">
<input type="text" name="field1" value="samplevalue"/>
<input type="button" name="regularbutton" value="regularbutton" onclick="myAction();"/>
</form>

The action version


<script>
function myAction()
{
	var field1 = document.myform.field1.value;
	var url = "/webapp/someservlet?arg1=" + field1;
	document.location=url;
}
</script>
<form name="myform" action="javascript:myAction();">
<input type="text" name="field1" value="samplevalue"/>
<input type="submit" name="submitbutton" value="submitbutton"/>
</form>

If you were to have all three function specified "onclick", "onsubmit" and "action", then the order of execution is

onlcick
onsubmit
action

Submitting a form from a form action script

The following is possible


<script>
function myAction()
{
	var field1 = document.myform.field1.value;
	var url = "/webapp/someservlet?arg1=" + field1;
	document.myform.submit();
}
</script>

The flaw here though, is that the above call is recursive. So to make it work you have to change action of the form using javascript prior to the submission. You also have to define your arguments as hidden fields


<script>
function myAction()
{
	var field1 = document.myform.field1.value;
	var url = "/webapp/someservlet?arg1=" + field1;
	document.myform.action=""/webapp/someservlet";
	document.myform.arg1.value=field1;
	document.myform.submit();
}
</script>

This will be necessary when there are form fields that are large text areas. In such a case the form submission or a url submission using "GET" method will not work. One has to revert to "POST" and the only way to accomplish that to my knowledge is to actually submit the form.

The "OnSubmit" alternative

If your goal is to submit the form due to large text areas, you can use "onsubmit" function to affect any needed changes to the form fields (especially the hidden ones) and return true after validation. In this scenario you will be invoking your javascript in response to "onsubmit" and hard code the action for the form.

Single Text field and the "enter" button

I have noticed by coincidence that in ie if a form has a single text field, an "enter" is automatically invoking a form "submit".

This single text field topic is exploered in more detail in an article titled FORM submission and the ENTER key?" by A.J.Flavell of Glasgow university.

The implication is that if there are two text fields one has to include a submit button to affect the submission on enter.

Here is an actual example of single text field form that I have used at my web log to look up the meaning of an English word.


<script>
function lookupMeaning()
{
 word = document.DictionaryForm.wordTextField.value;
 url = "http://www.webster-dictionary.org/definition/" + word;
 document.location=url;
}
</script>

<form name="DictionaryForm" action="javascript:lookupMeaning()">
<div class="menu">
<p class="header">Lookup Meaning</p>
<p align="center">
<INPUT type="text" name="wordTextField" size="10">
</p>
<p align="center">
<a href="javascript:lookupMeaning()">look up</a>
</p>
</div>
</form>

References

1. javacript-coder.com

2. For more details on input tags you can read the w3c schools. You can also see sample code for some common form examples.

3. Read about the form tag in more detail at w3c schools. This will tell you about the important attributes of a form tag. It is good to look at these references once in a while for uncovering the unexplored.

4. Study of events is an entire topic by itself. For a quick reference you can refer to the events section at w3c schools.

5. html 2.0 spec from w3.org

6. html 2.0 spec for form processing

7. This single text field topic is exploered in more detail in an article titled FORM submission and the ENTER key?" by A.J.Flavell of Glasgow university.

8. Javascript faqs from comp.lang.javascript

9. An article on multiple submit buttons by A.J.Flavell

10. Search Google for submitting a form using enter key

Further areas of research

1. Styling text fields

2. Styling buttons or controls

3. Tab order in forms

4. Styling html forms

5. Encoding process in web forms

6. Submitting a form programmatically