GoldBorder Title
GoldBorder Title
Gold Border
 Assignment Eight: Fabulous Forms
[ Acrobat Format ]
Next Assignment: CSS (Cascading Style Sheets)
 
 
INTRODUCTION

Let's start off this assignment with some work, shall we? (rubbing hands together as a mob boss would). Go to your page #3 (the one listing likes and dislikes) and link your graphic on the left to your page #4. Remember how to link things? It is the same as though you were to link text, except you will place the <a href=".."> and </a> commands around the command for an image instead of text.

My Updated Page #3

I will link the following rough sketch of my mom to our class homepage:

    Code Used
    <a href="http://goldborder.com"><img src="/pics/arnold/arnold-mom.jpg"></a>
You should notice a couple of things:
  • When clicking on the image you are switched to our class homepage
  • the image has a colored border around it that takes away from it being eye pleasing
The first item (taking you to the class homepage is on purpose). The second item (colored border around image) is a default that Internet browsers do when you do not specifically tell it that you do not want it. The programmers who made the browsers assumed that you would want the image to stand out if it is clickable for the viewer. In this case, we don't want momma to be offended by the icky color surronding her portrait, so...we will specifically tell the browser to not show a border:
    Code Used
    <a href="http://goldborder.com"><img src="/pics/arnold/arnold-mom.jpg" border="0"></a>
Doesn't that look better? The additional code is the border="0". You place this code as an attribute to the <img> command: <img src="..." border=0>. This specifically tells the browser to not place any border around the image even if it is clickable. This comes in handy when you place graphical buttons on your page and you know the viewer understands that those are to be clicked. Here is a quick example of buttons with/without a border while being clickable:
You should notice the second row of buttons without borders looks better.

Now add code to your link on your graphic so that the border does not exist.

My Updated Page #3

Far-Out Forms

This next level in your web based enrichment will deal with forms. Forms are used to send information to you the company/webmaster. The basic concept is, you create a form with options that the viewer can choose from, the viewer makes the choices they wish to select and send the form to you. This way the viewer/customer is able to inform you of their decisions on products/information, etc. You as the programmer will be able to format this information in a way that best deals with your needs.

The Assignment

At the end of this assignment you should be able to...

(1) Create A Form
    You have used forms throughout your entire life. When you fill out an application for a job, a form to allow the hospital to do tests or enter a sweepstakes, you are using forms. In each of these cases the form has been designed so that you the customer can give information to the company but in a format that the company desires.

    Could you imagine a company that handed people a blank piece of paper when they were looking to get hired and asked the person to just put down all their contact information, past employment, etc..? The company would receive this information in all sorts of organizational formats. John Doe may list his last name first and then his first name, Jane Smith would put her age first and not list her name until 1/2 way the paper. "What a mess!"

    So this is how forms came about. When a company receives a form from a customer that has been filled in, they know that it will be in the same order/format as they designed (i.e. last name, first name, middle initial, phone number).

    Go to your page #4 and place the basic HTML commands to start a page. You will want to title the page (remember the <title> command?) something that deals with purchasing your pet. You should also place a bolded line in the page that states the same message, something about a purchasing agreement for your pet.

    My Page #4

    Now we are going to create a form (are you jumping up and down with excitement?).

    To create a form you simply place the <form> command inside your page where you want the form to start. Then you place all the nifty form commands that create your form, and finally you place the </form> command at the end of your form.

    Note: Even though it is possible to create more than one form in your web page, I would avoid doing so for confusing not only the viewer but also yourself when it comes to updating your code later. A good rule of thumb is, only one form per page.
      Form Code

      <form>
      ... </form>

    One last thing before you actually code. A form should have a name. You may not have know this yet, but you can name certain things in your web page so that you can refer to them later when you get into advanced coding. For instance, you can give an image a name. By doing so you can affect a certain image on your page without affecting the other images (hint: this is how programmers create buttons that change when you move your mouse over them). But for now, we are only going to name the form. To name a form, you place an attribute inside the <form> command called name:

    Ex: <form name="myform">

    Place the code for a form inside your page #4. The form code is always located inside the <body> command. This means the form will be viewable to the customer. Also give your form a name. It is best to name a form in a manner that has something to do with the information you are receving from the viewer. For instance, I am going to be selling a Snort Blaster to the viewer so I will name my form snortsale.

    Note: When naming, it is better to not have any spaces in the name!
    My Updated Page #4

    Did you notice after you place the code that nothing change in the look of the page? That is because you have created a form but have not placed any questions in the form for the viewer. If you were to look at the code by using the VIEW SOURCE option on your internet browser you would see the code for the form.

    Even though there is nothing for the viewer to see, you have created your first form!
    CONGRATULATIONS !!

(2) Use All The Possibilities A Form Offers
    How about we put some questions on the form for the viewer? I think that would be a good idea.

    When you see forms on paper, you should notice that there are different ways they can ask you to answer a question. For instance, when asking your name, the form will usually just have a nice long box or line for you to fill in. When asking your age, the form may have little round buttons (called radio buttons) with age ranges (i.e. 19-25, 26-34, 35 and older). Some forms use boxes so that you can mark multiple answers. These are usually used with questions that deal with products or information that you may not be limited to one area. For instance, a form could ask: "What are your hobbies". The form would then list the most common hobbies with boxes (called checkboxes) next to each hobby. You then could use your pen/pencil to check each hobby you enjoy.

    The same holds true for forms you create on the web. You have all the following options when placing questions on your form:

    1. Text Box (like asking for a name)
    2. Radio Buttons (the circles)
    3. Checkboxes (so someone can pick multiple choices)
    4. Scrolling Lists
    5. Hidden (will discuss this soon)
    6. Text Area (to allow multiple lines in an answer)

    As you can see, you have a good variety of methods on how to ask question. To use any of these options for getting information we need to place the <input> command inbetween the <form> and </form> commands. Here is an example:

      <form>
      <input>
      </form>

    We then place an attribute inside the <input> command that tells the browser what type of option (input) we are looking for.

    Now let's get to bottom of these options.

    1. Text Box

      A text box will allow the viewer to type in a single line (or less) of information. One of the most common uses of this is the request for the viewers name. To produce a text box in the form we use the following command:

      <input type="text size="25">

      The size attribute tells the browser how large we want the text box. In this case, 25 means the box should be long enough to show 25 letters/numbers. This does not mean that the viewer is limited to 25 or that they must enter 25, it just means that when type in the box, they can see 25 at a time.

      You should also name all your input options in your form. You will soon see why this is so important. Remember earlier I mentioned that a form should have a name that reflects what the form is about? The same holds true for naming the input options. You should name each option to reflect what information the viewer will be entering. The more specific you are in your naming the easier it will be for you to use the information later.

      In this case I am going to create a text box on my form that is asking for the first name of the viewer. This is the code I am going to use:

      <input type="text" name="firstName" size="25">

      Note: Did you notice in the naming of my option that I used a capital 'N' in the name firstName? This was on purpose. When naming something with multiple words, it is good practice to use a captial letter in any words after the first word. This allows you to easily distinquish each word from each other. For example, if I wanted to name something bestdangdogsintheworld, it is hard to tell where words begin and end. But by using the capitalization rule, it is easier to read:

      bestDangDogsInTheWorld

      Time for work. Go to your form in your page #4 and place an input option using the text box option to ask for the first name of your viewer.

      My Updated Page #4

      Did you notice something missing? How is the viewer suppose to know what to type in the box?

      You can place text in front or after input options just as you do with any other information. By placing the phrase First Name before the box, the viewer understand what you are asking for.

        For Example:
        First Name <input type="text" name="firstName" size="25">

      Place the phrase First Name before your input option.

      My Updated Page #4

      Note: You should have a space between text and your input options. This makes the form easier on the eyes for your viewer. Make sure you have a space between the First Name text and the <input ...>

      Now ask for the viewers last name, street address, city, state and zip. For now I want the questions placed on their own lines for readability. You should name them lastName, streetAddress, city, state and zip.

      My Updated Page #4

      You should notice a couple things that do not look right.

      First, that the boxes for state and zip are too long for the information that would be entered in those. You would want a person living in Washington to enter the initials WA. By having such a big box, your viewer thinks you want the state name typed out. The same holds true for the zip. A zip code is usually 5 number.

      Go back to your form and change the size attributes for the state and zip. A good rule to use when picking a size is to pick a number one greater than what you need. This leaves some space for the browser to use between the information and the outside of the text box, making it easier to read for the viewer. In this case, I would set the state size to three (3) and the zip size to six (6).

      My Updated Page #4

      Second, the form doesn't look very organized when the input boxes are not aligned or the text. It looks like we just slapped the form together instead of thinking about readability. To make your form easier to read, we are going to use tables (remember I said the <table> command would be one of the mose useful ones you use).

      To use a table and make the form look nicer, I am going to place each question on its own row (<tr>), and also place the text in a separate cell (<td>) from the text box. This will cause the text and boxes the line up nicely. Here is what I am code to accomplish this: 

          <table border="0" cellpadding="3">
   <tr>
    <td>First Name</td>
    <td><input type="text" name="firstName" size="25"></td>
   </tr>
   <tr>
    <td>Last Name</td>
    <td><input type="text" name="lastName" size="25"></td>
   </tr>
   <tr>
    <td>Street Address</td>
    <td><input type="text" name="street" size="25"></td>
   </tr>
   <tr>
    <td>City</td>
    <td><input type="text" name="city" size="25"></td>
   </tr>
   <tr>
    <td>State</td>
    <td><input type="text" name="state" size="3"></td>
   </tr>
   <tr>
    <td>Zip</td>
    <td><input type="text" name="zip" size="6"></td>
   </tr>
   </table>

      Place a table around your question on your form to organize them. Remember to remove the <br> commands. You will not need them since you will be place the question in their own rows.

      My Updated Page #4

      Pretty nice looking form!

      Before we move on to the other options, let's apply some more techniques to our table/form so that we can really make it look organized and easy for the viewer to understand.

      The next thing you can do to your form is to align the text before each input option to the right. This will line up all the text nicely and place the text next to the box which reaffirms what you are asking for. To accomplish this, you place an attribute inside the cell command for the text for aligning the cell information to the right. For example:

      <td align="right">

      Put the align="right" attribute in the cell command for all the text in your table on your form. Do not place this attribute in the cell commands for the text boxes or you will undo the arrangement we are trying to perform.

      My Updated Page #4

      Now to further show that the text are just titles and the text boxes are for input, we can put a background color in the cells for the text. We accomplish this with the bgColor attribute in the cell command. For Example:

      <td align="right" bgcolor="#DDDDFF">

      Put the bgcolor="..." attribute in the cell command for all the text in your table on your form.

      My Updated Page #4

      The last thing we are going to do to the look of the table for now is to give it a border. This will better define the cells and make viewing easier.

      Change the attribute border="0" in your table command so that the border=1. Also place a cellspacing="1" attribute in the table command to inform the browser we want the lines separating the cells to be 1 pixel wide.

      My Updated Page #4

      Just so you can see the improvement, here are the two tables from my page. The first is how we started, the second has all the techniques applied for better viewing:

      First Name
      Last Name
      Street Address
      City
      State
      Zip
      First Name
      Last Name
      Street Address
      City
      State
      Zip
    2. Radio Buttons
      One of the hardest options in a form to program is the radio button (bet you didn't want to hear that). The reason is that the programmer doesn't take the time to learn the basic concept of radio buttons. Well, I'll teach you that concept first and then we will dive right in.

      Radio Button Concept: When placing radio buttons on your page you need to remember three (3) fundamental rules. By understanding these rules you can use radio buttons easily. Forget the rules and they will become a nightmare to use or you will avoid them all together, thus not using a very valuable tool.

      • Rule #1: (grouping)

        Radio buttons are grouped together by their name. In the earlier section on text boxes, you used a different name for each box. When it comes to radio buttons you use the same name on groups of buttons. This grouping allows the browser to control which button is used when the forms information gets sent to you. For instance, let's say you want to find out what age group the viewer is in. You create appropriate radio buttons with the groups of ages you want defined but give each radio button the same name. The basic radio button code is:

        <input type="radio" name="..." value="...">

        You already understand what the name attribute is used for. The new attribute is the value. The reason for this attribute in the radio button is that the viewer never enters information. The viewer just clicks on the radio button located next to the choice they desire. It is up to you to define what information (value) will be sent to you when they choose a certain button.

        Example:

          19-25
          26-34
          35-99           		Code Used
          <input type="radio" name="radioExampleAge" value="19-25"> 19-25
          <br> <input type="radio" name="radioExampleAge" value="26-34"> 26-34
          <br><input type="radio" name="radioExampleAge" value="35-99"> 35-99

        Go ahead and click on the radio buttons one at a time. You'll notice the browser will uncheck any other radio button in that group when you check another one. So if you click on the 19-25 age range and then click on the 26-34, the 19-25 age range radio button becomes unchecked. Only one radio button in a group can be checked at a time. How did it know to do this?

        The browser knows because you gave each radio the same name. In essence you are telling the browser that all three radio buttons are tied together but have different values. When the viewer finally send on the form to you, whichever radio button is highlighted will send its value to you. So if the 35-99 radio button is pushed it will send a value of '35-99' to you.

        Add a new row to the table on your page #4. In this new row add three radio buttons. The three should allow the viewer to choose what size animal they wish to purchase.

        My Updated Page #4

        You should have notice that instead of place the radio button on separate lines (like the example above), I place them next to each other. I do this since people are used to seeing them in this manner. Look on most paper forms and you will see radio buttons like this shown left to right, instead of up/down. Remember you want the viewer to feel comfortable filling out your form.

        How about another group of radio buttons? As long as you keep groups of radio buttons separated by their names, you can use as many groups as you wish. In the following example I am adding another group of radio buttons that asks what planet the viewer is from along with asking their age:

        19-25
        26-34
        35-99
        Earth
        Mars
        Tatooine         		Code Used
        <input type="radio" name="radioExampleAge" value="19-25"> 19-25
        <br> <input type="radio" name="radioExampleAge" value="26-34"> 26-34
        <br><input type="radio" name="radioExampleAge" value="35-99"> 35-99
        <br><input type="radio" name="radioExamplePlanet" value="The Blue One"> Earth
        <br> <input type="radio" name="radioExamplePlanet" value="Lots Of Dust"> Mars
        <br><input type="radio" name="radioExamplePlanet" value="Luke Skywalkers Home"> Tatooine

        I want you to notice a couple of things about the second group. First, I named the second set of radio buttons differently (radioExamplePlanet instead of radioExampleAge). This allows the viewer to select a radio button in each group without affecting the other group. Go ahead, click on an age group, then click on a planet. Notice how the clicking in one group does not affect the other? Now click on another planet. Notice the browser takes care of unchecking any other planets checked but doesn't change the age group radio buttons?

      • Rule #2: (values)

        Second, do you notice the values for the second group are "The Blue One", "Lots Of Dust" and "Luke Skywalkers Home"? This is another important train of thought. What the viewer sees next to the radio button can be totally different than what information will be sent to you when the form is sent. In this case, if the viewer had selected the planet called 'Tatooine' and sent the form, you would receive information that looks like:

        radioExamplePlanet = Luke Skywalkers Home

        It would then be up to you what you do with that information.

        Add another row to the table on your page #4. In this new row add three radio buttons. The three should allow the viewer to choose what color of animal. In my page I will give the name of the color to the viewer but in the value of the radio buttons I will use the hex code. So when I receive the forms information, I will receive hex code values for the color they desire. You will probably want a name like 'animalColor'.

        My Updated Page #4

        When you have finished the two rows of radio buttons, one with the size of the animal and the other with colors, try out your form on your page. You should be able to select a size and then select a color without affecting the other.

        One last thing about radio buttons and then you can consider yourself an expert.

      • Rule #3: (automatic selection)

        When giving the viewer a list of radio buttons, you can automatically select one of the options. This is done for two reasons. The first is that their is usually a common choice the viewers choose. By automatically having that option checked, you save the viewer time. For instance, if you were selling software and wanted to ask is the person using a PC or MACINTOSH, you would have the PC option selected since a high majority of your viewers will be using a p.c.

        The second reason is that if you do not automatically select one and the viewer does not select one either, then information (value) for that option will not be sent. In the case of our animal, if the viewer forgets to select a color, then when you receive the information from the form you will not receive the color information since the browser doesn't know which one to send you. Then you would have to e-mail the person back and ask them which color, which would increase delivery time and make a dissatisfied customer.

        To make a radio button automatically selected, just enter the word checked inside the radio button command. Example:

        <input type="radio" name="radioExampleAge" value="35-99" checked>

        Note:Always include a space between attributes in commands. In the example above, notice how there is a space between the attributes - type="radio" name="radioExampleAge" value="35-99" checked. If you do not include the space, the browser may process your commands incorrectly. This holds trude for the checked attribute.

        You can make a radio button automatically selected in each group of buttons. So in the example above I could have made an age group and a planet name selected automatically. The viewer can still change the selection but it may save them time if their choice is already picked. For example:

        19-25
        26-34
        35-99
        Earth
        Mars
        Tatooine         		Code Used
        <input type="radio" name="radioExampleAge" value="19-25"> 19-25
        <br> <input type="radio" name="radioExampleAge" value="26-34" checked> 26-34
        <br><input type="radio" name="radioExampleAge" value="35-99"> 35-99
        <br><input type="radio" name="radioExamplePlanet" value="The Blue One" checked> Earth
        <br> <input type="radio" name="radioExamplePlanet" value="Lots Of Dust"> Mars
        <br><input type="radio" name="radioExamplePlanet" value="Luke Skywalkers Home"> Tatooine

        Go back to your radio buttons for size and color. Choose one in each group and make it automatically selected.

        My Updated Page #4
        You can now consider yourself an expert at radio buttons!
    3. Checkboxes
      Now that you have jumped over the hurdle of radio buttons (you olympic contender you), you can now learn about checkboxes. This will be a piece of cake.

      Checkboxes have no grouping. This design was made on purpose. Here is a basic checkbox:

      Furry Fingernails Code Used
      <input type="checkbox" name="checkboxExampleProduct" value="Furry Fingernails"> Furry Fingernails
      Notice how you can click on the checkbox to check it and click on it again to uncheck it. This is differente from radio buttons in that a radio will not uncheck until you click a different one.

      Why no grouping? Checkboxes are not group so that the user can select as many as they want. A good example of this is a product list. Your customer may want to select more than one product they wish to purchase (you hope). But to make things simpler you can name all the checkboxes that deal with products the same name. For example, here is a list of products:

      Furry Fingernails
      Slimy Stomache
      Thorny Thigh       		Code Used
      <input type="checkbox" name="checkboxExampleProduct" value="Fingernails"> Furry Fingernails
      <br><input type="checkbox" name="checkboxExampleProduct" value="Stomache"> Slimy Stomache
      <br><input type="checkbox" name="checkboxExampleProduct" value="Thigh"> Thorny Thigh
      If someone checked all the boxes (must be Halloween), I would receive the following information:
        checkboxExampleProduct = Fingernails
        checkboxExampleProduct = Stomache
        checkboxExampleProduct = Thigh
      The main concept with a checkbox is, if they check the box, you will be sent the information, if the don't they information does not get sent. So in the example above, if they only checked the Stomache checkbox, then you would receive only that one line of information. And do you understand now why you can name them the same? It makes processing the information easier. If you couldn't name them all the same, you would have to create a different name for each product even though they are all products. This would be maddening if you had hundreds of products listed.

      Just like radio buttons, you can automatically check and checkbox by placing the word 'checked' inside the checkbox command. Example:

      <input type="checkbox" name="checkboxExampleProduct" value="Fingernails" checked>

      On your page #4 (sale form), do another row and give some options (minimum 5) that can be selected by the customer. A good name with be 'animalExtra'. Maybe that they want it wrapped, washed or any other things you can imagine. You have full freedom to place in all the same line or one per line. It is up to you. And for practice, why don't you automatically select at least 2 of them.

      My Updated Page #4

      That's it on checkboxes...yeahh!

    4. Scrolling Lists
      Okay, so you now have some text boxes, radio buttons and checkboxes. Both of these are good tools and do their job well in a lot of scenarios. The problem occurs when you want the viewer to choose only one item from a list. True, you could use radio buttons to accomplish this, but what if you wanted them to choose from the 50 states? That would take a lot of room on your web page. That is where scrolling lists come to play. A scrolling list is created by using the <select> command.

      You can have as many scrolling lists on your form as you wish but each has to have its own name and each list can have only one item selected at a time. Scrolling lists also have an ending command like you do with other commands (i.e. <b>...</b>, <table>...</table>).

      Note: Did you notice that radio buttons and checkbox commands didn't have an ending command?

      Here is the basic code for a scrolling list:

        <select name="exampleListStates">
        ...
        </select>

      Now all you have to do is tell the select (scrolling list) command what items you want listed and what their values are when they are chosen. To do this, you place the command <option value="..."> command in front of each item that is displayed to the viewer.

      An example of this would be listing some types of fruit:

        Code Used
        <select name="scrollingExampleFruit">
        <option value="Apple - Red"> Red Apple
        <option value="Apple - Green"> Green Apple
        <option value="Banana - Ripe"> Yellow Banana
        <option value="Banana - New"> Green Banana
        <option value="Pineapple"> Pineapple
        </select>
      A scrolling list works in the following way. A person can click on the scroll list down arrow. The browser will show the viewer all the items in the list. The viewer then click on one of the items and that item becomes the one listed. Go ahead, click on the list and click different items, you can reclick it after a select has been made.
      Note: Do not place the <br> command between <option>'s. The <select> command handles this for you.

      As with radio button and checkboxes, you can place anything you want in the value. Only you will see this information when the form is sent to you.

      Another nice feature of the scrolling list is the ability to automatically select one of the items when the list is first shown. It doesn't have to be the first item in the list either. The difference between a scrolling list and the radio buttons and checkboxes is you use the word selected instead of checked. So for instance, if in the list above I wanted the default item to be the Yellow Banana, I could do the following:

        Code Used
        <select name="scrollingExampleFruit">
        <option value="Apple - Red"> Red Apple
        <option value="Apple - Green"> Green Apple
        <option value="Banana - Ripe" selected> Yellow Banana
        <option value="Banana - New"> Green Banana
        <option value="Pineapple"> Pineapple
        </select>

      Create a scrolling list for your animal on another row in your table. I want the list to have possible nationalities of the animal. I also want you to automatically select one of the items listed in the middle of your list. Place at least six (6) items in the list.

      My Updated Page #4
    5. Hidden
      Using a hidden option may seem sneaky but it actually is quite useful to you and makes the form easier to read to the viewer. The purpose of the hidden option is to provide information to you when someone submits a form but you do not need input from the user. A good example of this is, if the information gets sent to your e-mail address. You know your own e-mail address and you do not need the viewer to enter it for you each time. Also, you don't need to display to the user that the information is being sent to your specific e-mail. The form however needs to know what your e-mail address. That is where the hidden option comes in handy. You can provide an option with a name and a value to the form without burdening the viewer with the information.

      A hidden option uses the <input type="hidden" value="..."> command. There is no ending command.

      We will use this in our form, so that when it gets submitted, it will go to whatever e-mail address you designate. To accomplish this we will place a hidden option in our form at the top that tells the form our exact e-mail address. Here is the code I would use:

      <input type="hidden" name="recipient" value="webmaster@goldborder.com">

      I am also going to give the form a hidden subject line that my e-mail program will use when sending the e-mail:

      <input type="hidden" name="subject" value="A Subject Line For The E-Mail">

      Once I place the code in my <form> command, it would resemble the following: 

      <form name="exampleFormHidden">
 <input type="hidden" name="hiddenExampleEmail" value="webmaster@goldborder.com">
 <input type="hidden" name="hiddenExampleSubject" value="A Subject Line For The E-Mail">
 ...
 ...
 ...
 </form>

      Place two (2) hidden commands in your form just after the starting form command (<form>). The first hidden option should have a name of 'recipient' and a value of 'your e-mail address', the second should have a name of 'subject' and a value of 'any subject you want on the e-mail'. By supplying these two hidden fields to the program that I created the program will be able to send the information to your e-mail address and provide a subject line of your choosing. In my case, the e-mail is webmaster@goldborder.com and the subject is Blue Bellied Snort Sale.

      When looking at my updated page, use the view source through your browser to see how mine looks.

      My Updated Page #4
    6. Text Area
      You have made it to the last option in the form. The text area. The text area option is very similar to the text box listed above. The difference comes in how much information the viewer can enter. With a text box, the viewer can only enter one line of information. In a text area option, the viewer is given a large box to type as many lines as their heart desires.

      As the web programmer, you get to specify how large the box is and if the box contains any information to start out with. Here is the basic code of a text area: 

        <textarea name="exampleTextareaComment" cols="40" rows="3">
</textarea>

      And this is the results of the above code:

        Code Used
        <textarea name="exampleTextareaComment" cols="40" rows="3">
        </textarea>

      Click in the box and type a couple words. Now hit your enter key and type some more. You'll notice that you can keep typing just like you were in a word processor. Because you gave the attribute cols="40", the box is 40 characters wide (or columns). The attribute rows="3" tells the browser to have three lines (rows) showing.

      Now in the following textarea option, I want you to type past the right side of the box and see what happens:

      Notice how your text moved to the left and was hidden from you until you hit the ENTER key? Most viewers will find this annoying. To make the viewer more comfortable you can instruct the textarea box to wrap text when the user reaches the far right of the box. To do this, insert the word wrap inside the textarea command. Like:

      <textarea name="..." wrap cols="40" rows="3">...</textarea>

      In the following box, again type past the right side and see what happens.

      You will find that the wrapping helps make your viewer more comfortable with entering information.

      One more thing about the textarea option and then we can use it in our Order Form. Any text you place between the <textarea> and the </textarea> will show up in the box. This comes in handy if you want to emphasize to the viewer what information you want in the box. This is also sometimes a negative capability since the viewer will need to erase your text from the box if they don't want it in there.

      The next box has some text already inserted to let the viewer know what I want in it:

      You are now ready to place a textarea box in your form. I want you to make a textarea box in its own row in your order form. The box should allow the user to enter comments about the order. I also want the box to wrap text if needed. The size of the box is up to you.

      My Updated Page #4
(3) Allow The Viewer To Send The Form To You
    Let's recap what we created and then move on to submitting the form.
      We ...
    • created a form and named it
    • created text boxes for name, address, etc.. and named each
    • created radio buttons with names and preset values, the viewer can choose which one to use (only one)
    • created checkboxes with names and preset values, the viewer can choose mulitple ones
    • created a scrolling list with a name and preset values, the viewer can choose one
    • created hidden options with preset values, the viewer doesn't need to worry about these

      and finally...

    • created a textarea with a name and allowed the user to type in the value

    We are now ready to submit the form!

    When you submit a form, you are telling the browser to send the information entered in the form to a program for processing. It is then up to the program to process the information and respond back to the viewer.

    In the case of our form, we are going to submit it to a program I developed for e-mailing the forms information to an e-mail address and responding back to the viewer with a thank you message. To accomplish this we need to do three things:

    1. let the form know that we want the information sent somewhere

      To let the form know we want the information sent somewhere, we insert the attribute method into the <form> command. We give a value to the method command of "post". The word post tells the form how to send the information. There is another word, get, that is sometimes used but post will work for any scencario. Here is the new basic code for the form:

        <form name="animalSale" method="post">
        ... </form>
    2. let the form know what program will receive the information

      Now you need to tell the form what program will process the information. You can either use the long internet name (if the program is on another computer) or you can use a short name (if it resides on the same computer). In this case we are going to use the short form since my program resides on the same computer as your web pages.

      To name the program you use the action attribute with the value being the name of the program. We are going to be sending the information to the following program: [deprecated]. That address instructs the browser to look for the program on the same computer, under the directory scripts with a name of myemail.exe. Here is the new form basic code:

        <form name="animalSale" method="post" action="http://lcc.ctc.edu/scripts/myemail.exe">
        ... </form>
    3. place a button on the form for the viewer to start the submital

      Now for the final step and the easiest. You need to create a button that the viewer can click when they are ready to submit the information. To produce the button, you use the same input command as the checkboxes, radio buttons, etc.. The only difference is that the type is called submit. The value of the button will be what is displayed on the button. You do not need the name attribute with a submit button.

      For instance, let's say I want to place a button for the viewer to submit the information and I wanted the button to say "click me, you silly". I could use the following:

        Code Used
        <form name="submitExample">
        <input type="submit" value="Click Me, You Silly">
        </form>         		Results

      You can place a submit button anywhere on the form you desire. It is treated as any other information. Most programmers like to place the button at the bottom of the form so that viewer won't click on it before finishing the form.

    YOU ARE NOW READY!!!

    Tell the form what you want done with the information by placing the method attribute in your form. Inform the browser where to send the information by placing the action attribute in your form. And finally, place a submit button on your form (at the bottom if you wish) and put any phrase you want in the button. Once you have your form ready, fill it out and submit it. You should receive the form in your e-mail. I will also try it out when you have finished the form. (of course I don't have any money, so hopefully I can get the animal for free? /smile).

    My Updated Page #4

    Extra stuff. I have written the myemail.exe to accept other hidden options to control how the response is shown. You can add any of the following to your form if you wish to add a little more personality to your form:

    • <input type="hidden" name="recipientname" value="...">
      Use this option if you want the e-mail message to you to include your name. Just replace the ... with the name you want on the e-mail.
    • <input type="text" name="name" value="..." size=25>
      Use this option (note it is a text option not a hidden option) if you want the name of the viewer to show up on the e-mail. This would mean you need to get rid of the firstName and lastName options and just put a name option.
    • <input type="hidden" name="yourmessage" value="...">
      Use this option to place your own message in the response to viewer. They will see this message after they submit the form. Just replace the ... with the message you want on the response.
    • <input type="hidden" name="returnurl" value="...">
      Use this option if you want a link back to your page or any other from the response page. This really helps the viewer in returning to your original page. Just replace the ... with the internet address of the page you want the viewer to go back to after submitting the form.
    • <input type="hidden" name="returnurlname" value="...">
      Use this option if you want to name the link back to your page or any other. This is used in conjuction with the 'returnurl' option. The 'returnurl' option tell the program where to send the viewer, while the 'returnurlname' option is what the viewer sees as the link to the new page. Just replace the ... with the internet address of the page you want the viewer to go back to after submitting the form.
    • <input type="hidden" name="displaynames" value="NO">
      Use this option if you don't want the names of the options in the e-mail. You will receive the values the viewer selected/typed but will not get the names of each options.
    • <input type="hidden" name="includeempty" value="YES">
      Use this option if you want receive information on options even if they have no value. This means even if the user did not enter anything the option will still be listed in the e-mail.
    • <input type="text" name="email" value="..." size=25>
      Use this option if you want to allow the viewer to supply an e-mail address. The program will make the e-mail message in a manner that if you respond to the message it will send a message to the viewers e-mail address. Note: This is not a hidden option, you want the viewer filling in their e-mail address.

    I have added a few of these option in to my page if you want to see them in action. Remember the hidden fields can only be seen when viewing the source.

    My Updated Page #4
 Assignment Eight: Fabulous Forms
Next Assignment: CSS (Cascading Style Sheets)