Forms 102

The first thing that needs said about forms on the Web is they require server-side scripting to provide intended functionality. If you want a form to send email, or take a poll, or transact a sale, there must be programs on the web server to process the information. So if you aren't operating your web site yourself, check with your hosting service to see what kind of forms processing scripts they have available.

Constructing a form is far less intimidating than it may appear at first. If you've already set up web pages using HTML, then you'll move naturally into setting up forms, which are also written using tags embedded right in an ordinary page. As with all other HTML, the appearance of a form can be dramatically altered by the browser used to view it. A great way to learn Forms, as with other HTML, is to examine the work of others: feel free to look at the source of these tutorials, or that of any other forms you are impressed by.

Here's the source HTML for the above form:

< FORM METHOD=POST ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query" >
Enter your name: < INPUT NAME=your_name >
< INPUT TYPE=submit VALUE="Test this form" >
< /FORM >

Let's take a close look at each of the elements of this form.

The FORM tag - Opening and Closing a Form

<FORM METHOD=POST ACTION="[name of program]"></FORM>

These tags start and end a form (all input fields of the form are placed between these tags). METHOD specifies which technical protocol the web server will use to pass the form data to the program which processes it (always set it to POST), and ACTION tells the server exactly which program that is. Note: POST must be capitalized, otherwise the method defaults to "GET".

In our example, the action is a program called post-query on an NCSA server. The post-query program is one NCSA supplies for testing forms. It simply echoes back the names and contents of all input fields on a form submitted to it. A web page may include multiple forms; however, forms may not be nested (you cannot create a form within a form). You must end the current form with </FORM> before you can start a new one.

Getting a line of text from the user

Enter your name: <INPUT NAME=your_name>

The above code creates the text input box for the user's name in our example form. Most form fields begin with <INPUT NAME=[field_name] and end with >. NAME defines the name of the data for the field; it's how the program which processes the form references the data from this field. You can pick any name for your fields, just make sure it is not one of the pre-defined Forms parameters. These variables, when set to have values, perform certain specialized tasks. For instance, one of the most common errors in creating forms is to have an input field ask for a client's email address, and using the variable email to store the address in. The word 'email', however, is one of the predefined parameters. Giving email a value tells the Forms Processor to send the form's results to that address, not what is intended.

The Submit Button

<INPUT TYPE=submit VALUE="Test this form">

Each form must have exactly one field of type submit. This creates the button the user pushes when they're done filling out a form, and should come after all the other input fields. If a form doesn't have a submit button, it is useless since once the user finishes typing in the data they won't have any way of sending it to a server. You can put whatever words you like on the submit button, using the VALUE keyword. If you omit the VALUE keyword, the button will be labeled "Submit".

When the user clicks the submit button, the browser collects the values of each of the input fields (text typed by the user, etc.) and sends them to the web server identified in the ACTION keyword of the FORM open tag (and that web server passes that data to the program identified in the ACTION, using the METHOD specified).

You may at some point get the urge to create a form with two or more submit buttons, each of which you'd like to perform a different task (say one to subscribe to a mailing list, and another to unsubscribe.) This is a natural inclination, but unfortunately you can't do it with the current WWW standards. Sometimes you can simulate this behavior by having multiple forms on one page, each with its own submit button, and perhaps nothing else. But if you associate multiple submit buttons with the same input fields by putting them on the same form (that is, between the same FORM tags), all the submit buttons will do exactly the same thing, namely pass the data of that form to the program specified by the ACTION identifier.

Continue With Other Forms Tags

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said.

The hierarchical menus were created using Peter Belesis' © Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

    

Site Map

 

 

 

 

I'm a light eater. As soon as it's light I start to eat.

 

 

 

 

 

 

I turned my life around. I used to be depressed and miserable. Now I'm miserable and depressed.

 

 

 

 

 

 

Stress is when your mouth says "yes" and your gut says "no".

 

 

 

 

Was this site useful to you?