Astro Lesson #22 : informal.forms.the.other.part

Oh - you again, hey? We suppose you want the rest of that forms lesson from last time. Okay, we guess we can manage to churn out something ...

finishing.form

Well we pretty much covered the main points in the previous lesson - apart from telling you how to finish off with a 'send' button. Here's how -

What's your favorite cheese? < form > < select multiple size=3 name="Cheeses" > < option value="camembert" >Camembert < option value="brie" >Brie < option selected value="wensleydale" >Wensleydale < option value="gorgonzola" >Gorgonzola < option value="none" >None! Nasty Smelly Stuff < /select > <br><br> <input type="radio" name="cheese" value="yes">I still like cheese<br> <input type="radio" name="cheese" value="no">I still hate cheese<br> <input type="radio" name="cheese" value="maybe">I might try cheese<br> <br><br> <input type="reset" value="I didn't mean to do that!"><br> <input type="submit" value="Gimme that Cheese!"> </form> Which all turns out like this - What's your favorite cheese? Camembert Brie Wensleydale Gorgonzola None! Nasty Smelly Stuff I still like cheese I still hate cheese I might try cheese

Go on - try it! Make some selections and then reset - see it wipes out anything you entered, other than whatever may have been preselected. Pressing send won't do anything, 'cos we are too far away up here in space, but you get the idea. (Remember last time, we told you all about CGI scripts? You don't? Well, go back then).

The default value for the reset button is, you guessed it - reset. And for the submit button, fancy that - submit!

formatted.forms.are.friendly.and.furry

So that about wraps it up. Forms aren't that hard after all are they? Don't forget the formatting however - The example above has actually been placed inside a table. (Go on, look at the source code - you know you want to ...)

Because you want everything to line up nicely and be pretty to look at, as well as being easy to follow, you'll need to think about using the < br > tag judiciously, and < div > and < table > - in fact any alignment tags can be used in conjunction with forms in order to get the elements where you want them.

Don't want the standard 'send' button? Why not try a custom made button or some other image? Here's what you need to do -

<input type="image" src="pics/mysooperbutton.gif" width=30 height=30 alt="press me to send" border=0" >



- where the type is changed to image, instead of submit. As with other image tags, alignment to any text on the same line can be tweaked with align=center/top/bottom added into the tag

freeform.forms

Don't have access to CGI scripts? Don't leave yet - you can still add forms to a web page without actually making them DO anything at all. "But why would you want to"?, Retrogrrl hears you say - come closer little cosmonauts and pay attention.

Pssss! Closer - ......... Surprise! ........ ReTroGrrl is always going on about creating an illusion of interactivity where it does not exist ...................................... You see, sometimes it helps to think outside the boundaries we currently bump into and be a little more innovative ...................................... This is a form element in it's simplest guise and you had to click in order to read this

Not impressed yet? There is another pretty sneaky use of this little trick. Running short of visual space? Need to confine text in a small area? The example above comes in quite handy for adding extra details, and yet only takes up one line - when the box is open it will expand either upwards or downwards, depending on the page size, and yet does not interfere with anything else on screen - groovy, huh? We love it!

Still wary? Sometimes it's hard to decide on the right word synonym allegory idea elephant for a story - why not give readers a choice? Visual elements add surprising interest with very little trouble on your part. Think of all the funny word combinations and add a little sunshine to the day

Want to get your readers attention? What could be easier than this cheeky pullquote style form box

First visit to the Space Cadet Lounge?    Don't forget to enroll for the other    twenty one lessons. Hurry and take your    seats before ReTroGrrl catches you    loitering in the officer's quarters!

Remember in Forms Part 1 the lesson began with a
very cheesy mouldy pretzelly flavour?
You do? don't? don't care? Whatever - now you know what fun can be had by all who knows what you lot will get up to.

We're simply trying to point out that if you forget the original function of forms, or just want to play around a little, then this is the lesson for you. All of the above were created in exactly the same manner as the 'official' forms, leaving out the value tags. And we don't even have to think about CGI or anything yukky like that at all.

mail.to.mail

We should say something about the mailto: function. It only works with IE 4 and netscape browsers so it just will not do for everyone. It does however, bypass CGI script stuff and maybe an alternative for other visitors could be provided if you are really keen to use it.

So what does it do anyway? Looky here -

<form method="post" action="mailto:me@myhouse.com">

The subject line can be preset just like the usual mail tag -

<form method="post" action="mailto:me@myhouse.com?subject=guestbook">

The result - well, any text sent will arrive on your doorstep in one great big long line with weird bits in the middle - but it can still be read. Otherwise it can also arrive as a mail attachment that requires notepad or wordpad.

Retrogrrl read somewhere that the following addition supposedly sends the text without all the 'weird bits in the middle' but we haven't tested it - let us know if it works anyway.

<form method="post" action="mailto:me@myhouse.com?subject=guestbook" enctype="text/plain">



Ah. so much to learn, and so few light years to learn it all in. Begone now, to tackle these temptations and come back next time for a smattering of something new, something exciting, well - something else.