Web Design & Development

[ Web Design & Development Topics ]

Online Forms

What a Form Is

A form is made up of fields and often has an action or actions occur either while the user is completing the form or upon its completion (usually using "submit"). In most cases a form either sends a communication to a recipient or else automatically returns a result. It is one of the foundations of electronic commerce (the ability to have transations with users online).

The use of online forms on the Web has become commonplace. Reasons for this are abundant but include:

• Desire to increase control of data submitted by the user
• Desire to increase methods of communication available to the end user
• Desire to decrease spam mail for the recipient
• Increase immediacy of reponse for the end user
• Ability to customize Web content based on user input

Of most importance is to make sure your form is clear, concise and to the point. Don't ask for information more than once and make it as easy as possible for them to give you an answer in a format that works for you. One way to do this is to use the right form elements:

• Radio buttons are good for questions where you want the user to choose only one item as an answer
• Drop down lists are also good for questions where you want the user to choose only one item as an answer.
• Check boxes are good if the user can choose multiple answers from a list of answers
• Text boxes are good for open ended questions

Ok, so how does one accomplish these things?

How Forms are Created

In the most basic sense a form is created by using a form open and close tag, like this:

<form>content here</form>

Once you have that there are a few things you will want to do:

• specify what is in the form
• specify what you want the form to do (usually upon submission)
• specify what you want to occur while the user is interacting with the form

All of these are specified within the form tags. And may consist of things like:

• Text fields
• password fields
• multiple-line text fields
• pop-up menus
• lists
• radio buttons
• check boxes
• buttons
• hidden controls

You can have several forms within a single document, but they cannot be nested or overlap.

What Goes in a Form

The most used form tag is the <input> tag. The type of input is specified with the type attribute. Form input types include things like:

TEXT

like this: <input type="text" name="whatever_you_name_the_field" />

output:

Sample:

<label>
<input name="fieldonly" type="text" value="Initial value goes here" size="100" maxlength="200" />
</label>

• maxlength - maximum length accepted in field
• size - character width shown on screen
• value - default value

RADIO BUTTON

like this: <input type="radio" name="whatever_you_name_the_field2" value="whatever_value_you_put_in" /> My text goes here

output: My text goes here My text goes here

Note: in most cases you will want the 'name' to be the same for a radio button series (ie, user chooses one value for that field)

• checked="checked" (if you want the item to be checked; one per group only)

Sample:

<label>
<input name="answerme" type="radio" value="Yes" checked="checked" />
Yes</label>
<br />
<label>
<input type="radio" name="answerme" value="No" />
No</label>

CHECKBOX

like this: <input type="checkbox" name="whatever_you_name_the_field3" />my text goes here

output: my text goes here

Note: in most cases you will want the 'name' to be different for a checkbox series (ie, user chooses multiple values for that field) unless your script on the server side can accept commas between values

Sample:

<label>
<input name="sendme_map" type="checkbox" value="Maps" checked="checked" />
Maps</label>
<br />
<label>
<input name="sendme_directions" type="checkbox" value="Written Directions" checked="checked" />
Directions</label>

TEXTAREA

like this: <textarea name="textarea" rows="3" cols="20">default text here</textarea>

output:

default text here

You can also alter the size (width/cols and height/rows):

Sample:

<label>Comments
<textarea name="demo5" cols="45" rows="5"></textarea>
</label>

A Sample Form

So lets say we combined all of the above, we would end up with code that looked like:

<form name="input" action="some_action_here" method="get">
Your name <input type="text" name="whatever_you_name_the_field" />
<br />
<input type="radio" name="whatever_you_name_the_field2" value="whatever_value_you_put_in" /> My text goes here
<input type="radio" name="whatever_you_name_the_field2" value="whatever_value_you_put_in_2" /> My text goes here2
<br />
<input type="checkbox" name="whatever_you_name_the_field3" />my text goes here3
<br/>
<input type="checkbox" name="whatever_you_name_the_field4" />my text goes here4
<br />
<textarea rows="10" cols="30" name="whatever_you_name_the_field4"></textarea>
<p>
<input type="submit" value="Submit" />
</form>

And that all would look like this:

When the Form is Submitted

In most cases you will want something to occur when the user completes and submits the form and this usually includes passing the form information to another location. For this you will use either "get" or "post".

GET

The get command passes the form information via a URL string. Lets say you have a GET form like below:

<form method="get" action="get.cgi">
Your name: <input type="text" name="name" size=20 />
Your favorite number: <input type="text" name="favorite" size=5 />
<input type="submit" value="Submit my form" />
<input type="reset" value="Clear my form" />
</form>

You will end up with output that would look something like this:

http://www.somewhere.com/get.cgi?name=?name=John+Doe&age=2"

This is because a GET form puts all data into the query_string environment variable.

POST

With a POST method the information is not passed via the URL string. Instead it is used to pass data to a gateway program's STDIN

Here sample POST form:

<form method="post" action="post.cgi">
Your name: <input type="text" name="name" size=20 />
<input type="submit" value="Submit my form" />
<input type="reset" value="Clear my form" />
</form>

The post method is advantagous in that there is no limit to the information that can be sent, and also the user cannot see the actual information that is passed to the server.

Things to keep in mind:

• What works on paper might not work as well on the Web
• Keep it clean. Don't ask for data you don't need
• Tell the user why they are filling out the form
• Give them access to a privacy policy somewhere. It doesn't have to be highlighted but should be locatable if a person is concerned about it

Form validation

Form validation is used to ensure that the user has completed sections of your form. There are a number of methods to accomplish this, but the most common is JavaScript. Below is a sample of what the script could look like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1">
<title>My title here</title>
<script type="text/javascript">
function check_form() {
if (document.f.lastname.value.trim()=="")
{alert("last name");
return false}
}
String.prototype.trim=function(){
return this.replace(/^\s+|\s+$/g,'');
}
</script>
</head>
<body>
<form method="post" name="f" onsubmit="return check_form()" action="">
Last Name: <input type="text" name="lastname" />
<input type="submit" value="Submit /">
</form>
</body>
</html>

Learn more at:

• http://www.w3schools.com/html/html_forms.asp
• http://www.htmlgoodies.com/tutors/fm.html
• http://www.w3.org/TR/html401/interact/forms.html
• http://www.7nights.com/dkrprod/gwt_four.php