The HTML Files: Forms

1. SO YOU WANT A MORE INTERACTIVE SITE?

Forms allow your visitors to communicate with you. They are thus very cool as make your site more interactive! You can do forms in one of two main ways. One is to have the form automatically send the input direct to you via a mailto link. The other has the input dealt with server-side, and involves the use of CGI scripts (which are run using a PERL programme on your ISP's, or web host's, server). The latter require your provider to have the necessary stuff "on" their server in the first place, to be able to do this, and is a lot more complicated, so I will initially deal with "mailto" type forms here, until I learn more about the CGI ones myself! You can find out more about the CGI type forms (or those using JavaScript, as well) if you go to the Wicked Links page.

IMPORTANT: Using the "Mailto" form method is NOT secure, thus anybody can intercept and read the information that a user input on such a form, once it is submitted to you. So NEVER ask visitors to type anything confidential (if they are sensible they wouldn't do it anyway!). If you need a secure form, you will be needing to learn about CGI ( ) and SSL (Secure Socket Layer) which are out of the scope of this tutorial at the moment! So the type of form I show is purely for, e.g. guest books, okay?!

2. CONSTRUCTION OF A FORM

You start off by using the FORM element, which can have various attributes. Best thing is if I design bits of a form, then below each bit, I will show you the code used to do it! DONT fill the form in - I have done it merely as an example: if you try to press "submit", you may get an error on your computer!! If you want to fill in a real form that works - well, just go and play around in my Guestbook instead!

There is some code "hidden" here, that always has to appear at the start of a form, so I will show it for you below:

<FORM METHOD="post" ACTION="Mailto:emailaddress" ENCTYPE="text/plain">

This code should always appear for a "Mailto" type form, so where I have written e-mail address above, you just put in your own e-mail address. The ENCTYPE attribute tells the encryption type of the text in the mail message (sent to you when the form is submitted), so here I am specifying it to be sent ASCII.

TEXT BOXES

Enter your name here:
Your e-mail address is:

So the code for both of these is:

Text you want: <INPUT TYPE="text" NAME="username" SIZE="30">

Most is self-explanatory, the SIZE= attribute is merely the number of text characters allowed in the box. Efficient use of the NAME attribute can really help you piece together the data, which arrives all jumbled up, when a "Mailto" form is submitted to you. Whatever you put against this attribute is sent to you, along with the user's details, so for instance, you would see USERNAME=person's name, so name your form boxes carefully using whatever name will help you know what you are looking at when you receive a form submission!

A "DROPDOWN" LIST BOX:

What age are you?

So the code for the above is:

<SELECT NAME="category" SIZE="1">
<OPTION SELECTED>1st thing in list<BR>
<OPTION>2nd thing in list<BR>
<OPTION>3rd thing in list<BR>
</SELECT>

Use the NAME attribute exactly as I mentioned earlier - in effect it is the category for the particular selections. The SELECTED attribute that appears at the first OPTION just tells the browser which one should be displayed in the box! SIZE tells how many lines of the list to display.

THESE ARE "CHECKBOXES":

Are you (you could be all of them if you want!):
Groovy?
Cool?
Or just plain sexy?!
(Erm, pardon me - I got a bit carried away there!)

So the code for the above is:

Text <INPUT TYPE="checkbox" NAME="category" VALUE="thing"><BR>
Text <INPUT TYPE="checkbox" NAME="category" VALUE="thing"><BR>
Text <INPUT TYPE="checkbox" NAME="category" VALUE="thing"><BR>

Each line is an individual entity, but you can combine the entities by using the same NAME attribute, i.e. if the list is to do with breeds of dog, then enter "Breed of dog" as the category by the NAME attribute. The VALUE attribute has the name of the individual entry, e.g. the first one might (using this analogy) be "Collie", and the last might be, "Labradoor".

THESE ARE "RADIOBUTTONS":

Today, you feel (you can only be one of these, not all!):
Hot-Stuff?
Silly?
Moody?
Crap?
Like you've got PMT?

So the code for the above is:

Text <INPUT TYPE="radio" NAME="category" VALUE="thing"><BR>
Text <INPUT TYPE="radio" NAME="category" VALUE="thing"><BR>
ETC, ETC, ETC,

The notes for this are exactly the same as for Checkboxes, earlier.

TEXTAREAS

Write whatever you want below:

So the code for the above is:

<TEXTAREA NAME="category" ROWS="x" COLS="y"></TEXTAREA>

The above is just a bigger text area, the notes on the attribute NAME are the same as earlier. The attributes ROWS and COLS just specify how many rows and columns of text should be able to be entered in the text area. This particular command DOES have an end tag, as you can see.

PASSWORD FIELD:

Enter your password here:
ENTER YOUR PASSWORD:

The code for the above is:

TEXT: <INPUT TYPE="password" SIZE="x" MAXLENGTH="x">

This allows the user to input a password - i.e. it shows up in the box as asterisks, e.g. "* * *" not actual text. Again, SIZE refers to the number of text characters the user should be able to input into the box.

SUBMISSION OF FORM:

Click on one of the below to clear the form, or to submit it (don't actually do this, just pretend you are!):

The code for the above is:

<INPUT TYPE="submit" VALUE="SUBMIT">
<INPUT TYPE="reset" VALUE="RESET FORM">

So the above will let the user do exactly what they say, according to what is under the FORM METHOD= and ACTION attributes (as earlier above).

END OF FORM

All you do to tell the browser that the end of the form has finished, is:

</FORM>

And that's it! Form finished!

Now, if I were you, I would play around with all the different bits of the code above to get the hang of them. If you want to cheat, have a look at the source code behind my Guestbook page! This may well be easier to follow than pulling the code from above. Also, just remember that you can put any HTML (e.g. text formatting) tags within the FORM elements, so you can use tables to tidy up the presentation of your forms, different text, you name it!

COPYRIGHT INFORMATION: All Rights Reserved. No part of this HTML tutorial may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior permission of the copyright owner, Didi Austin, who may be contacted using the link below.