First off, EVERY form needs to be surrounded by the FORM tags. Its easy.
Just start with a basic template like this...
<form action="mailto:you@host.com" type="text/plain">
</form>
Now all the rest of the stuff i tell you about below goes between those tags. DONT forget
them. Its taken me hours to figure out why my form didnt work before heh. Also the ACTION
attribute is where it goes to when submitting. If you enter action="mailto:youremail@somewhere.com"
then it will submit the form via email. You can also use a cgi script to instantly send an
email without opening your Email program. This is done by using CGI. Your action would then
be action="yourpage.cgi". Im not so great with CGI but Matt is!
Wouldn't you like people to be able to submit things to you in order instead of an email
with a ton of sloppy information? Well, forms is your answer.
Here is the thing that everyone has seen. Enter your information blah blah.
Username:
Password:
And here is how to do it
Username: <input name="username" type="text" size="20"><br>
Password: <input name="pass" type="password" size="10">
Wow thats neat, lets check it out.
the INPUT tag tells the computer to make that box where you can type in your name or
whatever they ask for. SIZE refers to how wide these things are. And whats up with the
TYPE? Type tells is what kind of input to make. Notice the type on the password one is
"password" this tells the computer to hide the letters in these --->*****. If it has TEXT
as the type then it dispays the letters without hiding them.
Now comes the name= part. This is a GREAT feature, but is named different ways throughout all form
tags... This tells what title to give their info to when it arrives in your email. So
it would display like this if i entered my info and sent it...
username Chris
pass mypassword
2 notes:
It will reveal the password when sent by email*
the text in front of the boxes is only text and tells the user what to enter, it has nothing
to do with the forms itself*
lets move on :)
Now for some simple Checking, they have 2 kinds, radio (circles) and
checkboxes (squares). Both have the same purpose but have a slightly different quality.
Im dum: Im smart: Can only choose 1 option on radio buttons
Im a Girl: Im a Boy: but can choose multiple options on checkboxes
Im dum:<input name="smartdumb" type="radio" value="dumb">
Im smart:<input name="smartdumb" type="radio" value="smart">
Im a Girl:<input name="boygirl" type="checkbox" value="girl">
Im a Boy:<input name="boygirl" type="checkbox" value="boy">
neato, notice the VALUE attribute, this is like the NAME attribute in the input boxes. In
your email they will show up like this if u used this form and clicked the boy button:
boygirl: boy
They simply show up as whatever you named
them since the user doesnt actually enter information.
Now what does the NAME="" thingy do if VALUE= is what you get in your email? Well, if you
have buttons on the same topic like those^ (are you a boy or girl) then you must name that category.
This way it knows that all the radio buttons named one are in the same category and only
one can be chosen fromt hat category. Actually good thinking b.c you may want more than one set
of radio buttons for your page!
The only changables here are type="radio"
and type="checkbox". As stated above, you you want them to be able to select only one option,
use radio buttons. If you would like them to be able to choose more than one, then use checkbox types.
Now lets move on to some menus.
Select Your Age:
Select Your Age:
<select name="age">
<option value="too young"> less than 18
<option value="old enough"> 18 or over
</select>
These 2 are EXACTLY the same EXCEPT for one tiny thing. Can u see the difference? The top
one has a drag down menu and the bottom is like a box with options. Ill tell why in a second.
First lets check this wiero stuff out. SELECT is the tag here, easy b/c they have to SELECT something
from a list. Notice this has and ending SELECT tag as well. This is because there is information
unspecified information that can go here. Each SELECT tag has OPTION tags. These are simply OPTIONs
that you can SELECT. Sorry for caps but i think it may help stick to your brain.
the SELECT tag just hold information within the box, the meat is in the OPTION tags.
the way to name the OPTION tags is by value="whatever" insetad of name="whatever" since you already
named the SELECT tag something. The name attribute is the same as always, and the value
attribute is what information is submitted. Kinda like in the inputs, name="whatever"
would be the heading in your email followed by the information they typoed. Well this
is the same, only the information they submit is from a box in which you specifically name
by using the value="whatever" part. Confusing to type but i think you should pick it up
farely fast.
Dont get mixed up, its easy to heh. just sue the value for whatever u want submitted to
you as the info. Whatever is after the option tag ends is simply text, and only tells them
what they are clicking.
Here we are where you can let someone give there FULL thoughts and
as much room as you want them to have. This is called a textarea and is very simple.
Type Comments Here
Type Comments Here:<br>
<textarea rows="10" cols="20">
They type Here
</textarea>
Wow thats incredibly simple. TEXTAREA is the tag here. ROWS is how many vertical rows to go
and COLS tells how many colums wide to make it. Then you type some text if u want and close
the TEXTAREA tag. Now theres one more thing. without it, the forms are useless.
Almost done!!!, Whew this was longer than i thought. i had to recollect
some memory for forms. Now theres one more tiny but important step. The submit button!!! Also
important is the Reset button!!!
<input type="submit" value="Submit Form">
<input type="reset" value="Clear">
hmmm you thought input was only a tag for entering info right? Well forms suprise us again folks.
but it is all over now! INPUT TYPE="RESET" will clear your current form, and INPUT TYPE="SUBMIT" will
enact the ACTION= part at the beginning of ur form, by sending it to your email address or
CGI page. Thats all for now. Finally done with forms eh? take a nap, i know i am :P
