Forms are widely used so people visiting a page can send information to someone by simply
answering a few questions. Whether it's to recieve information from the user, or to be
able to access certian parts of your pages, forms can be invaluable.
First we'll start with the basic forms tags. They are <form>
</form>. Pretty, easy, huh? Now tell the form what to do.
There are two different methods: POST and GET.
GET is used to retrieve information from the site. For example:
<form method=GET action="index.html">
<input type="submit" value="Click Here To Reload This Page">
</form> would result in
POST will work for almost everything you would ever need.
The action is what tells the form what to do. If you wanted the form to be mailed
to someone, you could use the first example. But you may not like what you get back.
Usually, it looks like this:
name+john&+henry&+address+p+o+box&...
Obviously, this is hard to read. So you can try adding ENCTYPE="TEXT/PLAIN"
to the tag to take it away if you have a newer browser. The best way to accomplish this
is to use CGI
Scripts to filter out the garbage and mail you the response.
After the first form tag, you can have any of the
following...
Text Box <input type="text"
name="first name" size=20>
This allows the user to physically type something in. In
this case, it's their first name. The size tells the browser how big the box should be.
The name can be anything you want. It just defines in the response the answer. (Ex.
name="first name" would return first name=Answer)
= <input type="text" size=30>
This is not seen by the user, but is sent to the owner with
whatever="whatever" in the response. There's no need for size. Some CGI scripts
require this, but more on that later.
Radio Buttons <input type="radio"
name="whatever" value="whatever">
This will give you a little round button to click to make a
choice. These are good when you are giving them options, like Yes and No. But it also
limits them to one or the other. To stop this, just insert the word "multiple"
into the line.
Example = <input type="radio"> Example
Instead of giving you a round button, this gives you a
square. The boxes are nice if you want to allow alot of choices. The radio buttons are
nice if you want to limit them to one choice.
= < input type="checkbox">
Allows someone to enter text, but instead od displaying the
input, it displays ******* where the letters would go.
= <input type="password" size=30>
Text Areas <textarea name="textarea"
rows=3 cols=40>
This gives the user a textarea in which to answer questions
that require answers longer than a couple of words. You can also add the line
wrap="virtual" to take away the bottom scroll buttons.
<textarea rows=3 cols=40></textarea>
Drop Down Lists
This comes in handy if you want them to see a list of
choices, but you don't want to use the radio or checkbox's. You can set the select option
up very easily. For example:
It's very simple to use. You van change the size to allow
as many choices as you would like to have seen. I used 1 here, but you can have as many or
as few as you like. And if you want to allow more than one selection, just insert multipe
after select.
<input type="submit"
value="Submit!">
This is the button the users will click on to send the form
in whatever way you have set up. You can change the value to whatever you like.
<input type="reset" value="Clear
This Form">
Does exactly what it says - it resets the form. Maybe they
filled it out and didn't like what they put. Or maybe they decided it's a waste of time.
Whatever the case, they can click on the "Clear This Form" button, and
everything is gone. Again, the v alue="" can be whatever you want the button to
say.
Now that you know the commands, let's see one in action.
You can also view the code for the form by viewing the source here. Well, here
it goes. Please fill in the following:
How did you find my page?
a friend
a link from another page
a search engine
I have no clue!
How would you rate my page?
What other pages of mine have you visited?
The
main page
The Comics page
The Guitar page
The Cartoons page
None - I haven't been anywhere
Now, tell me what you think of this page. (Please be kind!)
Hopefully, this answers any questions you may have about
forms. Except, how do you make it with all the nice output? When I do it, I get a bunch of
crap. What am I doing wrong?
The answer is: nothing. It's not your fault. That's just the way the mail program sees it.
If you would like the nice output like mine, travel on to the CGI section of this site, or
ask your local sysadmin where they store theirs and if you can access it.
