Web Design Course

Web Design II Course

Week 2: Forms
Web Design Course

Return to Web Design II Home Page


Take this short questionnaire:

Note: The information from this questionnaire will only be submitted correctly if you are using the Mozilla Firefox browser or a version of Internet Explorer that is earlier than version 6.0. If you are using a newer version of Internet Explorer, you can complete the form below, but it will not submit properly if you click the "Submit" button.

  1. Name:

  2. Why is the sky blue?

  3. How many times have you been to Disneyland?
     0
     1
     2
     3
     4
     5 or more

  4. Which of these flavors of ice cream do you like?
    (You can check as many as you like)
     Vanilla
     Chocolate
     Strawberry
     Rocky Road
     Rainbow Sherbet

  5. Which of these is your favorite color?

      

Wasn’t that fun? This week, you will learn how to create your own forms. This is a fun way to make your Web pages interactive.

The Form Tag

To create a form, the first thing you must do is tell the computer you are starting a form, and what you want done with the form data. The command to alert the computer is:

<FORM METHOD="POST" ACTION="mailto:YOUR E-MAIL ADDRESS">

Notice the command did three things:

  1. It told the computer a FORM was starting.

  2. It stated the METHOD of dealing with the form is to POST it (for now, this is the method that we will use for all of our forms).

  3. And the data should be posted to your e-mail address through the "mailto:" ACTION.

Remember you will need to put your e-mail address immediately after the "mailto:" without a space! This is where the results of the form will be sent.

That's how we begin the form. Now that the computer knows a form has begun, it's looking for information to gather. In this lesson, I will go over five form elements; the text box, the text area box, the radio button, the checkbox, and the drop-down list. These are by far the most common form elements used on the Internet. Also, I will show you how to create the button that sends the form to the "mailto:" address or clears the form.

The Text Box

This is a box that allows for one line of text. When placed on a page, your reader will be able to write in information such as his name or e-mail address. Here's what a text box looks like:

Go ahead. Write something in it. It works. You may have to use your mouse pointer and click on the box to activate it, but it works. The command to place it on the page is this:

<INPUT TYPE="text" NAME="name" SIZE="30">

There are three parts to the command. Here's what they are and what they mean:

  • INPUT TYPE tells the computer that a form element is going to be placed here. What type of form element? The form element we type this time is "text"; then the browser knows that a text box should go there.

  • NAME is the name you assign to the box. Remember that this is a form that will be sent to you via e-mail. When you receive the e-mail, it won't look just like your HTML page. Only the text will arrive, so you have to remind yourself what the category for each form element is. For example, if on a form you ask someone to enter his name, you might name the form element “name”. If the person entered the name of “Joe Smith” on their form, here is what you would receive via e-mail:

    name=Joe Smith

    Remember you don't have to call the box "name." Call it whatever you want, but make sure that you name it something that will mean something to you. It will arrive to you with that name. So, if you're using the box to get the reader's name, call it "name." If you're using the box to get the reader's e-mail address, call it "e-mail." etc., etc.

  • SIZE tells you how many characters long this box will be. You can make it any size you'd like. I've found 30 is a good size for many text boxes.

Page 2

 

Lessons

 
Make a Free Website with Yola.