forms

<forms>
So you want a form on your page - maybe a survey or a way for people to email you straight from your page? Here's what you've gotta do: You will need these three things: A cgi script or something that will do the job of sending An HTML page that has the form elements on it. An email address <contents> let's go the text box the textarea the check box the radio button the pull-down list the menu the submit button the reset button using your own image a completed form <let's go> Here is the first tag you'll need: <form> & </form> Here's what can be done with it: <form action="cgi-bin/mail.cgi" method="post"> action = what your form does. Action points to your cgi script. method = how it does it. With the script I'm going to give you, you'll want to use "post." <the text box> Here's how to get a text box for people to write short stuff in, such as their name, their email address, or whatever. Put all this within your form tags.
<input type="text" value="email address" name="email" maxlength=50 size=20>

So all of the fields you want to work with your form will be <input> tags. Input type for a text box is "text." Value = what is in the box before anyone writes their own thing in it - not necessary at all. Name = how it is referred to when you get the email. Maxlength = this is how many characters your visitor will be allowed to input - not necessary. Size = this is how long the box looks on your page. <the textarea> These are for if you want a space for someone to write more. Do them like this:
<textarea name=test cols=20 rows=5>default text in here</textarea>
default text in here
<the check box> A check box is a little square that you can put a check in. When you have a list of check boxes, people can check as many or as few as they'd like. You do them like this:
Which parts of this page have you read?<br> <input type="checkbox" name="read tags" value="1">Tags<br> <input type="checkbox" name="read tables" value="1">Tables<br> <input type="checkbox" name="read frames" value="1">Forms
Which parts of this page have you read? Tags Tables Forms
Okay; this time the type is "checkbox." Name = this is what you get in your email - they all have to be different. Value = this is what you get sent when someone checks the box. This can be "1" or "yes" or anything you like to show they checked it. <the radio button> The thing about radio buttons is you can only pick one. Here's how they go:
Does this form page make sense so far?<br> <input type="radio" name="sense" value="yes" checked>yes<br> <input type="radio" name="sense" value="no">no
Does this form page make sense so far? yes no
So the input type is "radio." Name = what you see again, only this time, they all have to be the same. Value = what you see when they select one or the other Checked you can include in the <input> tag if you want one of the buttons to already be selected. You can leave it out if you don't. <the pull-down list> Like so:
Which do you like best?<br> <select name="favorite"> <option value="eseals">Elephant Seals</option> <option value="harp">Harp Seals</option> <option value="ribbon">Ribbon Seals</option> </select>
Which do you like best?
You'll notice that that one worked a little differently. This time all you need is the tag <select> and then some <option>s. Name will show up in your email so you know which part of your form this came from and value will show up for whichever one your visitor selects. <the menu> The menu is somewhat like the pull down, except that instead of pulling down, it scrolls. Also, you can show more than one choice at a time. Here's how:
Which would you rather do?<br> <select name="which one" size="3" multiple> <option value="worms">eat worms</option> <option value="arctic">swim in the arctic</option> <option value="exam">take a chem exam</option> <option value="bus">ride greyhound cross country</option> <option value="pet">pet a kitty</option> </select>
Which would you rather do?
You'll notice that this code is the same as the pull-down, except that it has two extras: Size specifies how many options to show. Multiple lets visitors select more than one option. If you only want them to be able to pick one, leave "multiple" out of your tag. <the submit button> Now how are people going to get this info to you? They need to hit the submit button! Make it like so:
<input type="submit" value="sock it to me">
You can put anything you like under "value" and it will show up on the button! <the reset button> This is not really necessary, but if you have a longish form and want people to be able to clear everything they've written on it all at once, give them a reset button:
<input type="reset" value="erase all">
Again, say anything you like under "value." <using your own image> Say you don't like that gray button with the boring text and you want to use your own image, do this:
<input type="image" alt="red leaf" src="../pix/red.gif" border=0>
All you have to do for that is provide the path to your image and change the input type from "submit" to "image." The other tags in there are just your standard image tags, which you should know by now! <a completed form> So here is what a completed form looks like:
<b>My Mail Form</b><br> <form action="cgi-bin/mail.cgi" method=post> <input type="text" value="your name" name="name" maxlength=50 size=20> <p> Which of these are good names for cats?<br> <input type="checkbox" name="yoshi" value="1">Yoshi<br> <input type="checkbox" name="panda" value="1">Panda<br> <input type="checkbox" name="kitten" value="1">Kitten<p> Which is better:<br> <input type="radio" name="better" value="cats" checked>cats<br> <input type="radio" name="better" value="dogs">dogs <p> <input type="image" alt="go" src="../pix/go.gif" border=0> </form>
My Mail Form Which of these are good names for cats? Yoshi Panda Kitten Which is better: cats dogs don't get excited - this form is not going to work.
Now get the cgi script to make your form work. go back