<Forms>

Forms have two parts.The HTML, or layout of the form, and a CGI script running on your web server.CGI stands for Common Gateway Interface.CGI scripts run on the web server and process the information that a browser sends them.Geocities supports Forms with it s CGI script /cgi-bin/XXXXX.I'll show you how to use it a little later. For now we'll dive into the HTML.

Look at the following example:

<FORM METHOD=POST ACTION="http://myserver.com/cgi-bin/form-name"> <H4>Who are you?</H4> Enter Your Name: <INPUT NAME="yourName"><BR> <P><INPUT TYPE="submit"></P> </FORM>

We start with the <FORM> tag.All parts of the form must be within these tags.The attributes for this tag are, METHOD and ACTION.The METHOD may be either GET or POST depending upon what your CGI script needs. The ACTION is a pointer to the script that processes the input. It may be a full URL or a relative path.

Then there is a normal heading followed by some text and then the <INPUT> tag.The attributes for the <INPUT> tag that we will be using are; TYPE and NAME.The TYPE is the kind of form element you are using.The default is text.Some other available elements are, radio buttons, check boxes, and various buttons.The NAME is the name of the element.

The next line has the INPUT TYPE as submit.This sets up the submit button.When you click on the submit button the form submits the data you entered to the server for processing by the CGI script that you declared in the <FORM> tag.

The above code gives you this:

If you fill in the form and click the submit button a CGI script will echo the data back to you.Click your BACK button to return to this page.

More INPUT attributes

You can change the lettering on the submit button with the VALUE attribute.

<INPUT TYPE="submit" VALUE="Click me to submit" >

Gives us a submit button with the text specified in the VALUE attribute instead of just submit query.

The attributes SIZE and MAXLENTH control the size and lenth of a text entry field.SIZE is the width of the field while MAXLENTH is the maximum number of characters that may be entered.

You can make a password field by changing the TYPE to password.Password fields are the same a text fields except that the text that appears in the field is blanked by asterisks.Even though the text is blanked, the password fields are not secure.The text is sent over the internet to the server as clear text.

Radio Buttons

Radio button are easy to do.Put them in a list format with a radio button on each line.Make sure the NAME on each list item is the same and the VALUE for each is different. Here is an example:

Example	Sample Code
Analog Digital	`<FORM METHOD=POST ACTION="http://www.mcp.com/cgi-bin/post-query"> <input type="radio" name="voltage" value="Analog">Analog<BR> <input type="radio" name="voltage" value="Digital">Digital<BR> <input type="submit" value="Click Me!"> </form>`

Check Boxes

Check boxes allow you to select more than one item from a list of items. Here is how to create one:

Here's the code


<form method=post action:"http://www.mcp.com/cgi-bin/post-query"><br>

<h3>Where are you from?</h3><br>


<input type="checkbox" name="Deep South" checked>Deep South of USA<br>

<input type="checkbox" name="MidWest">Midwest of USA<br>

<input type="checkbox" name="Right Coast">East Coast of USA<br>

<input type="checkbox" name="Left Coast">West Coast of USA<br>

<input type="checkbox" name="North">Great White North of USA<br>

<input type="checkbox" name="Another Country">Another Country<br>

<input type="checkbox" name="Another Planet">Another Planet<br>


<input type="submit" value="Click Me!"><br>

</form>

Selecting from a list

Drop down list boxes can be created with the <select> and <option> tags. Check out the following example:


<h4>Favorite Human Ancestors</h4>

<form method=post action:"http://www.mcp.com/cgi-bin/post-query">

<select name="human">

<option selected>None selected

<option>Homo Erectus

<option>Homo Antecessor

<option>Homo Halibus

</select>

<input type="submit" value="Click Me!"><br>

</form>

Favorite Human Ancestors

The RESET Button

Here we go! The format for the Reset button is like this:

<'input type="reset" value="Clear Selections">

We'll use it in the next example.

A Big Whompin' Text Field

The code looks like this:


<form method=post action:"http://www.mcp.com/cgi-bin/post-query">

Enter your comments:

<textarea name="comments" rows=5 cols=30>

</textarea><br><br>

<input type="submit" value="Click Me!">

<input type="reset" value="Clear Selections"><br>

</form>

Hidden Fields

You can pass on info transparent to the user with a hidden field. This is especially useful when you create a form that sends E-Mail. You can include that the E-Mail came from your webpage. Then you will know that the sender was at your page. To do it use the <input> tag as you normally would but this time make the type attribute equal to hidden and the value attribute is the message you want to send.

Forms at GeoCities

There is one CGI script available for forms at GeoCities. It lets you send the contents of a form to your E-Mail address. Here is the format to use:

<form method=post action="/cgi-bin/homestead/mail.pl?membername

Where membername is your member name.

To learn more about HTML, Site Design and Management, check out the books in my Book Store.

E-mail: jim314@oocities.com ICQ: 724480
Updated on: 1/17/98 16:11:34 CST