Astro Lesson #21 : informal.forms.part.one

Greetings, Space Cadets. Today, let us discuss the wonder of forms, by which we do not mean body shapes nor green papers to be completed in triplicate. No, we are talking of boxes and spaces on a web page designed to hold information about YOU! Whether you are purchasing something on the net, or signing up for an E-newsletter, you gotta have somewhere to fill in all the gory details. As this is quite a busy little topic, we will split it into parts 1 & 2. Retrogrrl promises to supply part 2 in the next few days, so be patient dear children and read on ...

in.the.bin

Forms in web pages. We'll show you how to make 'em, but realise that they will only work when combined with a CGI (Common Gateway Interface) script (program). This requires the cooperation of your ISP's server, which is where CGI scripts live ... you will need to be very greasy and politely enquire, in humble tones,

a) If they allow CGI scripts to come out to play, and
b) Whether they happen to have some lying around, or if you will need to go hunting some of your own.

Matt's Script Archive is a handy starting place, 'course, if you're a real geek you can write scripts all by yourself.

How does this work? The CGI script is sent to the server's cgi-bin (not the sin-bin) where it patiently awaits the contents of a form, filled in by a form-filler on your form page. If it's a nice, self-fulfilled script it will gladly sort this information and send it back to you in an email, in a format that you will be able to understand - hopefully. This is similar to the way counters work, tracking site visitor's. Many ISP's will not sanction the use of scripts as it involves security issues, so you'll need to check this out.

There is an alternative that involves the 'mailto' function, however, not all browsers support this. Later we will show how you can still have fun with forms, without using their full potential.

So much for the STUFF, let's get on with the HTML!

formal.form.tags

Forms being containers, like to be in their own little container, like so -

<form> lots of stuff goes in here </form>

Please note that this will also force a new paragraph - which is nice, but if you are desirous of placing a form element - maybe a radio button (don't worry, we'll get to that!) somewhere in the midst of sentence, the < form > should go way at the top of the paragraph in question.

Another note : If you are lucky and get to mess about with cgi-thingys, you'll also need to put something like so -

<form method="post" action="/cgi-bin/fred_script">

(Don't worry too much if it throws ya - it simply means using the 'post' method of sending stuff to the cgi script, send all this to the cgi-bin place, and give it to the guy in the corner called fred_script - no, not that one, the other guy in the raincoat!)

Okay, one more note: Different kinds of forms can all be bunched together between the form tags - they like getting cosy, but be sure and not stick form tags within form tags as they tend to argue and override each other - nasty!

the.three.amigos

Yes, there are 3 kindsa tags used for displaying forms - textarea, input and select

Textarea
You know when you are asked to enter "in 25 words or less" type fields? This is one of those, and its up to you to specify how big an area you wish to supply for filling in, using rows and cols. Here we go :

<form>
<textarea name="yakkety yak" rows="3" cols="50">
Enter details here
</textarea>
</form>

See what we mean?

Naming the input fields is required for the cgi scripts to sort the information

Default text can be whatever you like, or nothing at all

Don't be fooled by the 'cols' attribute - it actually means number of characters

wrap it all up with the 'wrap' tag

wrap=virtual : shows text as being wrapped, but sends it Mr cgi as a great long line.

wrap=physical : shows text as being wrapped, and sends to Mr cgi the same way

Ooooh! How'd we do dat? We'll show you ... later. Ha ha ha!

checkout.the.checkboxes

The input tag is rather spiffy in that it allows radio buttons, checkboxes and small text fields.

<form>
<input type="checkbox" name="yes" value="yes"> I like cheese
<input type="checkbox" name="no" value="no"> I hate cheese
<input type="checkbox" name="maybe" value="maybe"> I think I like cheese
</form>

I like cheese I hate cheese I think I like cheese

radio.radicals

<form>
<input type="radio" name="cheese" value="yes"> I still like cheese
<input type="radio" name="cheese" value="no"> I still hate cheese
<input type="radio" name="cheese" value="maybe"> I might try cheese
</form>

I still like cheese
I still hate cheese
I might try cheese

You'll see the differences between the two now - try entering some choices (even if you don't care about cheese). Checkboxes allow more than one choice, or none at all, while radio buttons are an either/or proposition, and must be grouped under the same 'name'. If you want to make sure Mr cgi doesn't end up accidentally receiving blank fields, pre-check a choice by doing this -

<input type="radio" name="cheese" value="yes" checked>

tiny.text.to.input

This is geared for small areas of text only - otherwise look at using the 'textarea' tag instead. Make sure you specify a size (how many characters) and maybe a maximum length

<form>
The kind of cheese I like :
<input type="text" name="mycheese" size="25" maxlength="50">
</form>

The kind of cheese I like :

selective.selections

Finally, 'select' offers either a drop-down or scrolling list. Here we go again ...

What's your favorite cheese?
<form >
<select name="Cheeses">
<option value="camembert"> Camembert
<option value="brie"> Brie
<option selected value="wensleydale"> Wensleydale
<option value="gorgonzola"> Gorgonzola
</select>
</form>

What's your favorite cheese?

Camembert Brie Wensleydale Gorgonzola

From the above you'll see that 'Wensleydale' is preselected - this is arranged by adding 'selected' into that particular option. By adding the word 'multiple' to the select tag we get this effect ...

What's your favorite cheese?

Camembert Brie Wensleydale Gorgonzola

You can even set how many options you want to appear at once by using size=? in the select tag

What's your favorite cheese?

Camembert Brie Wensleydale Gorgonzola None! Nasty Smelly Stuff

Oh my! Retrogrrl's had enough and is waving you all away to play with these new toys So off you go and caper with these confabulations, til next time when we finish our formations.