Forms

Introduction

Forms allow you to interact with your viewers. Most web pages are very passive, in that your viewer is simply looking at the page, taking the information that they require, and going away again. Forms give you an opportunity to interact with your users, and obtain information from them. There are a wide variety of different forms, and they can be used for a lot of different purposes - sending you feedback, ordering a product, using a form to post a message to a guest book and so on. Most of these uses require something called CGI scripts, or Common Gateway Interface. The form that we'll create is about as simple as it can get, and can be sent directly to you in email.

Form elements

The HTML for this form are as follows:
<FORM ACTION="mailto:philb@twilight.demon.co.uk" METHOD="POST" ENCTYPE="text/plain">
<H4> Yourself</H4>
<TABLE BORDER="BORDER"><TR><TD COLSTART="1"><I>Name</I></TD>
<TD COLSTART="2"><INPUT NAME="Name" SIZE"25" MAXLENGTH="50"></TD></TR>
<TR><TD COLSTART="1"><I>Position></I></TD>
<TD COLSTART="2"><INPUT NAME="Position" SIZE="25" MAXLENGTH="50"></TD></TR>
<TR><TD> COLSTART="1"><I>Company</I></TD>
<TD COLSTART"2"><INPUT NAME="Company" SIZE="25" MAXLENGTH="50"></TD></TR></TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Send response to Phil Bradley">
<INPUT TYPE="RESET" VALUE="Clear values and start over"></P>
</FORM>

Explanation of the elements

• <FORM ACTION="mailto:philb@twilight.demon.co.uk"
  • Opens the form and tells the browser that the contents should be mailed to me.

• METHOD="POST"
  • This should be posted. The other option here is 'GET' if you're going to be making a call to a cgi script

• ENCTYPE="text/plain">
  • The data should be sent in email as plain text

I'll ignore all of the table formatting, which you should be familiar with by now. There is obviously no reason why you should not put a table into a form, and I tend to do so because it makes the whole thing look neater. The important bit of the code relates to the section in the table where you input information, so I'll move onto that.

• <INPUT NAME="Name" SIZE"25" MAXLENGTH="50">
  • If someone is going to be sending you data from your form, you need to know which element they have filled in, which is where the "NAME" comes in. The SIZE and MAXLENGTH indicate how much space someone has to fill in the required information.

• <INPUT NAME="Position" SIZE="25" MAXLENGTH="50">
  • Same as above, only this time I want to know their position in the company

• <INPUT TYPE="SUBMIT" VALUE="Send response to Phil Bradley">
  • The "Submit" element here tells the form to create a submit button, and the VALUE tells the form what to put on it. Once this is clicked, the form will then undertake the ACTION required.

• <INPUT TYPE="RESET" VALUE="Clear values and start over">
  • Similiar to SUBMIT, this one allows you to start over.

Result of sending the form

I filled out the form above and sent it back to myself. What I received was an email which said:
Name=Phil Bradley
Position=Consultant
Company=Philb & Associates
Which is not terribly exciting, but it proves that the form works. We can now go on and add a little bit more to the form to provide some proper value to it.

More on forms.