Lesson 16 - Forms, Part 1
In the next three lessons, you're going to create a webpage that can collect information from your readers and send that information to your email address. This information could be in the form of a survey, a page to make comments, an order form, whatever feedback you'd like from your readers.
For the final project, you need one of these 'feedback' pages on your site.
If you are using your style sheet, all the code for these forms will go right after the <div class="centerdoc"> tag and end with the closing </div> tag.
If you aren't using the style sheet, the code will go between the opening <body> and closing </body> tags, and you'll have to add navigation buttons back to your home page.
<form> Tags
Before you can set up your forms, you need to add certain lines to your code, just after you open up the <body> tag:
<body>
<form action="http://www.gavilan.edu/cgi-bin/generic/formmail.cgi" method="post">
<input type="hidden" name="emailto" value="anyone@somecompany.com">
<input type="hidden" name="nextpage" value="http://www.angelfire.com/bug/csis6/thanks.html">
<input type="hidden" name="subject" value="travel to Thailand">
</form>
</body> |
The first <form> tag opens up the form. At the end of your page, you'll have to remember to add a closing </form> tag. The action attribute:
action="http://www.gavilan.edu/cgi-bin/generic/formmail.cgi" method="post"
tells the browser where to send the input. In your case, you would want to send it to a cgi script that your webmaster has set up for you. This cgi script will read the input from the <form> and format it. The next line,
<input type="hidden" name="emailto" value="anyone@somecompany.com">
will be hidden from the user, but will tell the browser to send the results to your email address (substitute the above email address with your own).
The next two lines are also inputs, and are also hidden:
<input type="hidden" name="nextpage" value="http://www.angelfire.com/bug/csis6/thanks.html">
<input type="hidden" name="subject" value="travel to Thailand"> |
The first one tells the browser that once the Submit button is clicked, the next page loaded should be at http://www.angelfire.com/bug/csis6/thanks.html. You haven't made this page yet, but you'll pretend.
And, the last hidden input statement, name="subject", tells the browser what you want in the subject line of your email message. Now, you'll know that everything with the subject line Travel to Thailand will be coming from this form.
So, here's the basic format: every <input> tag needs a type, a name, and a value.
- type="...."- The type could be:
- hidden, like the ones illustrated above;
- radio, like the ones that will be dealt below;
- checkbox, text, or textarea, which you'll see later, and
- submit or reset, which you'll see later as well.
- name- The name is what will come back to you as a label in your email message.
- value- The value is the content supplied by the user filling out your form. In the case of radio buttons and checkboxes, your code will supply the value. In the case of text and textareas, the user will type in the values.
Before going any further, skip to the bottom of your HTML document and add the closing </form> tag, just before the closing </body> tag and </html> tag:
</form> </body> </html>
Without that closing </form> tag, none of your form elements will show up.
Radio Buttons
Now, you get to start the fun part.
Remember, each input in your form will require a type, a name, and a value. Here's a list of <input> tags for your radio buttons:
<p>What type of ice cream do you prefer on your flight?<p>
<p>
<input type="radio" name="ice cream" value="Cherry Garcia">Cherry Garcia?
<input type="radio" name="ice cream" value="Rocky Road" checked="checked">Rocky Road?
<input type="radio" name="ice cream" value="Tutti Frutti ">Tutti Frutti Cocoa Munchy?
</p> |
Here's another question:
<p> Which seat would you like to sit in for 14 hours with 300 other people hurtling through space?</p>
<p>
<input type="radio" name="chair" value="window">Jammed up against the window?
<input type="radio" name="chair" value="center" checked="checked">Stuck between two smelly people who snore?
<input type="radio" name="chair" value="aisle">Hanging out in the aisle where everyone trips over your feet?
</p> |
And, here's what your page will look like when run through a browser:
One more attribute was sneaked in on some of those lines. The second option on both questions had:
checked="checked"
added in the list of attributes. Hopefully, you can figure out what that made the browser do. You can keep all your options unchecked if you'd like, just by leaving this attribute out. Or, you can check the one you think most people will want.
Submit Button
Unfortunately, nobody can send you their preferences. You need a button for them to send their answers off. Here's the code:
<input type="submit" value="Submit">
You don't need a name for this one. You just have to tell the browser that this is the signal to send off those values to the cgi-bin address in your <form> tag.
The value attribute is what will show up on the button when you run the document through a browser. Like this:
If you changed the value to something like this:
<input type="submit" value="Send this information">
your button would look like this:
Email Answers
Even before you've uploaded this form, you can try it out. Of course, you have to be hooked up to the Internet, but you can load your page into the browser, click the radio buttons that you want, and click that Submit button. Then, go to your email account and see if you got an answer. Here's what it might look like:
It's not a very glamorous or easy-to-read submission, but it works. Notice that the subject line is Travel to Thailand, so you know this is coming from the form above.
The two questions had labels of ice cream and chair. You can see that this person likes Rocky Road ice cream, and wants to sit in the center chair.
Checkboxes
Radio buttons are designed to give the user one choice, and only one choice. If they try to click on more than one radio button, the first one clicked will be emptied.
Check boxes, on the other hand, are designed to let your users click as many options as they'd like.
Here's the code. Remember, each <input> tag needs a type, a name, and a value attribute.
<p>Please check all the reasons you might be afraid to come with us.</p>
<p>
<input type="checkbox" name="excuses1" value="homesick">I'm afraid to leave my mother.
<input type="checkbox" name="excuses2" value="leeches">I hate leeches, poisonous snakes and malaria-carrying mosquitoes.
<input type="checkbox" name="excuses3" value="expense">I have to work all summer because I'm broke.
<input type="checkbox" name="excuses4" value="filth">I'm afraid of public bathrooms.
</p> |
Notice that all the names for the checkboxes have to be different (unlike the radio buttons). This is because the radio buttons will return only one answer, while the checkboxes can return more than one.
And, here's what it will look like in a browser window:
Those two middle boxes won't be checked when the page is first loaded. They have been simply checked in order to show you how this is going to look in your email once the information is submitted.
Here's the email message:
Notice that there are two excuses, #2 and #3. The others (#1 and #4) weren't checked, so they won't show up in the email message.
This email message also illustrates another point. The labels that you gave your questions (ice cream, seat, excuses2, and excuses3) are listed alphabetically instead of in the order you asked them, which might be confusing. You can get around that by being creative with your labels: aicecream and bseat would be listed in the right order, but still mixed up with the emailto entry, the nextpage entry, and the subject entry.
You'll probably notice, as you're playing around with these forms, that your thanks.html page that you name in the <form> tags isn't there. After you click on the Submit button, you're probably getting messages like "URL not found". That's because you haven't loaded the page up, so ignore that message.
This is the end of Lesson 16. Please go to the next lesson.
|
