Lesson 6 : Tables and Forms

Many sites have an actual purpose, unlike the practice pages, and try to convey some kind of information to the user.  The average web surfer, however, does not have the attention span for searching through long, fact-filled paragraphs.  For this reason, it is possible to display ideas in the form of organized tables.  Here is an example of how a table can be used to clearly present complicated statistics.

My Day Friday Saturday
10:00 Work on Web Page Wake Up
12:00 Look for Real Job Go to Disney World
2:00 Watch TV Eat Dinner

Actually, my day is fairly simple to understand regardless of how it is displayed.  In case things are not the same for you, follow these easy instructions:

  1. Use the tag <table border = "1" width = "493" height = "191>.

  2. For each row, type in <tr> to start and </tr> at the end.

  3. For each cell within a row, use the tag <td width = "23" height = "52">Information</td>

  4. End the code with </table>

Cells are typically uniform and their height and width should coincide with the measurements of the other cells in their row, but they may consist of any dimensions and can even encompass an entire row.

Tables work great for telling the user something, but in order to get something in return, forms must be used.  These often act as surveys and applications.  They are made up of various kinds of input devices and include code that submits the results to a particular web site, e-mail address, or database.  Here is an example:

 

1.What is the point of this form?

To waste time                                        To provide a useful example

C                                                           William Henry Harrison   

There is no correct answer to this question, if you click on reset, it returns to the first, but that's only because it's the default value.  This form does absolutely nothing, if you click on submit, it will probably give you an error message of some sort.  Radio buttons are just one type of input for forms; you can also use checked boxes, text boxes, and several others.  Next you will learn how to use all of these devices to create a form that does something and tells you what it has done.  Follow these lengthy and confusing steps:

 

  1. Begin the form with the tag <form> anywhere within the body section.

  2. Create items with the format <input type=" " name=" "> and any additional tags which are required

  3. The name is the title you select for any group of a type of form objects and the input type may be any of the following:

    1. "Text" for a single-line text box, also use size=" " for the length of the box.

    2. "Checkbox" for one of a group of boxes that may or may not be checked at the same time.  Use value = " " with on or off to indicate the initial status.

    3. "Button" with the additional tag of value = " " for the caption of the button.

    4. "Image" for a picture which may be clicked on to yield some result; use the normal tags for pictures within this field.

    5. "Submit" for the button which sends the data from the form, and "Reset" for the button which returns the form to its default status; use value = " " to indicate the caption of the button.

    6. You can create a multi-line text box with the tags <textarea rows = " " cols= " " name = " "></textarea>

    7. You can make a drop-down menu with the tags <select name = " " size = " ".

  4. To add a label, place the text id = "abc" within any item tag and create a <label for = "abc"> this is a label </label>.  The id should be equal to the label name.

Here are some examples of the different types of form objects, they won't do much of anything. 

       

                   

Think you have these things all figured out? Try the Quiz on Chapters 5 and 6 to prove yourself wrong.

Table of Contents