The HTML Tutor: The Forms Tutorial

Forms Tutorial

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.

Note: If you tried but it was not work right, please try to change these tag &It to the symbol "<" instead of. Then do the same with each tutorials so.

First we'll start with the basic forms tags. They are &ltform> </form>. Pretty, easy, huh? Now tell the form what to do.

&ltform method=POST action="mailto:username@domain.com">

There are two different methods: POST and GET. GET is used to retrieve information from the site. For example:

&ltform method=GET action="index.html">
&ltinput 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 &ltinput 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)
= &ltinput type="text" size=30>

Hidden Box &ltinput type="hidden" name="whatever" value="whatever">

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 &ltinput 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 = &ltinput type="radio"> Example

Checkbox's &ltinput type="checkbox" name="whatever" value="whatever">

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">

Password Box &ltinput type="password" name="whatever" value="whatever">

Allows someone to enter text, but instead od displaying the input, it displays ******* where the letters would go.
= &ltinput type="password" size=30>

Text Areas &lttextarea 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.

&lttextarea 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:

&ltselect name="select" size= 1>
&ltoption> Option #1
&ltoption> Option #2
&ltoption> Option #3
</select>

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.

&ltinput 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.

&ltinput 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:

What is your name?
What is your email address?
How old are you?
Where are you from? City: State:
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.

Return Home