Berlin Construction, June 2000Building Forms
Part of How Do They Do That With HTML? by Carl Tashian

OK, open up your HTML or text editor, and lets start writing a form. First of all, every form begins like this:

<FORM ACTION="action URL" METHOD="GET or POST" NAME="my_form">

The ACTION (action URL) is the location of the form processing script, which you may already know if you've read about forms and done a little research. Otherwise, leave it blank and you can deal with it later.

The METHOD (GET or POST) determines how the form data will be sent to the server when it's submitted by a user. GET puts the form data directly onto the end of the action URL, and POST puts it into the request for the action URL, not the action URL itself. Whoever is processing your forms will tell you how to set this variable.

Now, here come the form elements. You've got a number of options, and each option has a few more options. So lets go through them:

First, lets build a one-line freeform text input box . If you want more than a one-line text field, you should try using a <TEXTAREA>, which is shown further down the page.
HTML
Output
First Name: <INPUT TYPE="text" NAME="first_name"> First Name:

This first example is a simple text input box. The TYPE is "text", obviously.

The NAME (in this case, first_name) is a required field for every form element. It gives each form element a name, which is used by the form processing script. For most e-mail forms, the name of each variable usually doesn't matter; it's more for your own sanity than anything else. Just make sure you use different names for each form element. Also, try not to use spaces in the name--underscores are better.

First Name: <INPUT TYPE="text" NAME="first_name" VALUE="Carl"> First Name:

Now I've added a default VALUE of "Carl" to the input tag.

First Name: <INPUT TYPE="text" NAME="first_name" VALUE="Carl" SIZE="7"> First Name:

SIZE allows you to change the width of the input field. It may take a bit of experimentation with this value, because in IE, it SIZE="5" doesn't translate to 5 characters wide, but in Netscape it does.

Zip Code: <INPUT TYPE="text" NAME="zip_code" VALUE="37215" SIZE="5" MAXLENGTH="5"> Zip Code:

Finally, I added a MAXLENGTH to limit the number of characters to 5, in the case of a zip code. Notice the confusing discrepancy between SIZE and LENGTH, which mean the same thing (number of characters) but are not interchangeable (MAXSIZE and LENGTH are not valid in INPUT tags).

That's it for text inputs. Lets move on to radio buttons, which are very straightforward. For these, we use an INPUT TYPE of radio:

<INPUT TYPE="radio" NAME="fruit" VALUE="apples">Apples
<INPUT TYPE="radio" NAME="fruit" VALUE="oranges" CHECKED>Oranges
<INPUT TYPE="radio" NAME="fruit" VALUE="grapes">Grapes
Apples
Oranges
Grapes

The user selects one (and only one) option, and that variable (in this case fruit) is set to the VALUE of the selected choice. The CHECKED option sets the default selection when the form appears. In this case, Oranges are selected by default.

Radio buttons are nice for one option, but when multiple choices are available, it's necessary to use a checkbox:

<INPUT TYPE="checkbox" NAME="fruit" VALUE="apples">Apples
<INPUT TYPE="checkbox" NAME="fruit" VALUE="oranges" CHECKED>Oranges
<INPUT TYPE="checkbox" NAME="fruit" VALUE="grapes" CHECKED>Grapes
Apples
Oranges
Grapes

The syntax for checkboxes is almost exactly the same as radio buttons, but multiple items can be checked, and multiple items can be set as default values with the CHECKED option. For each item checked, the form variable (in this case, fruit) is sent to the form processor. If more than one item is checked, more than one fruit variable will exist, contrary to the way variables are typically defined in a programming language.

<INPUT TYPE="hidden" NAME="email_to" VALUE="htmlguide@tashian.com">

For INPUT items, you can also use a TYPE="hidden" for hidden variables, which won't show up as anything on the web page. They can be surprisingly useful for your form's interaction with the form processing script. I won't say anymore about hidden variables, but your web provider may require that you use one or two in your form, for administrative purposes.

Now things start to diverge. We have covered all of the typical options with INPUT tags, but there are a few more. The drop-down box does not follow the typical convention, but here it is:

<SELECT NAME="fruit">
 <OPTION>Apples
 <OPTION>Oranges
 <OPTION SELECTED>Grapes
</SELECT>

By now, this should all seem pretty straightforward. SELECTED (not CHECKED) is used to set the default value on a drop-down box, otherwise the default will be the first item in the OPTION list (in this case, Apples).

<SELECT> also allows selection boxes that don't drop down, like this one:

<SELECT NAME="fruit" SIZE="4">
 <OPTION>Apples
 <OPTION>Oranges
 <OPTION>Grapes
 <OPTION>Pears
 <OPTION>Bananas
 <OPTION>Strawberries
 <OPTION>Mangos
</SELECT>

Here, SIZE dictates the number of lines in the selection box. This is a simple alternative to the drop-down.

There is only one more form element, the textarea. A textarea is a larger version of the freeform text input box. It looks like this:

<TEXTAREA NAME="comments" ROWS="5" COLS="23">Enter Comments Here.</TEXTAREA>

Constructing your form is simply a matter of putting together the appropriate form elements, with unique variable NAMEs for each element. Once you've finished building the form, be sure to end it:

</FORM>

That's it. You're done. It's pretty easy to choose what you'll need for your particular application, now that you know what's available. Good luck!

The Next Level: Autofocus!

Some sites, like Google, use a simple JavaScript trick that puts the cursor into a particular form input box when the page is loaded. When you go to Google, you can immediately type into the search box. As a comparison, Yahoo! doesn't allow this. You actually have to click into Yahoo's search box in order to type. OK, Google's little trick isn't a huge benefit, but you have to admit it's pretty convenient. Certainly very handy in cases where your page contains little more than a simple form.

How to do it:

Here's a web page that does the trick:

<html>
<head>
<title>My Page</title>
<script>
<!--
function setFocus() {
 document.my_form.input_box.focus();
}
// --></script>
</head>
<body bgcolor="#ffffff" text="#000000" onLoad="setFocus()">
<form action="<i>action URL</i>" name="my_form">
 The focus will go to this text input box: <input type="text" name="input_box">
</form>
</body>
</html>

See it in action!

Setting this up on your page is kind of tricky, because you'll have to fiddle around with a few things. First, make sure the section between <script> and </script> in the above example is on your page. This section of JavaScript code actually does the work--the setFocus() function is here, and it tells the web browser to put the cursor inside the input box. This line of the code is key:

 document.my_form.input_box.focus();

For your page, you will have to change "my_form" to match the NAME of your <FORM>, unless your form is actually called my_form. Additionally, you have to change the "input_box" to match the NAME of your <INPUT> box. This way, JavaScript will know which input box you'd like to have the cursor in.

The last step is to make sure that your <body> tag contains the onLoad="setFocus()" option. This tells your JavaScript code to run when the page is loaded by a web browser... and voila, you're done.

[ return to front page ]

Reproduction of material from this page without written permission is strictly prohibited
Copyright © 1995-2001 Carl Tashian