Introduction to Forms

HTML provides a number of tags that create inputs that a client may use to send data to a server. When using these inputs, they must be grouped together as a unit so that the client's browser knows what to do with all of the data. This grouping is called a form.

For our exercise/lesson today, we will simply be examining the components that are available for a form.  First, we have to lay the foundation for the form. Open Dreamweaver and if a new web page is not open, from the File menu select New, and then from the window that opens select Basic Page.

To insert a form into your web page, click on the new form button. A dashed red line should appear indicating the region where the form will be contained.

If you open the code view on Dreamweaver, you should also see some code inserted. This code indicates the beginning and ending tags of the form along with the critical form attributes.

Remember that we will be using the form's name to uniquely identify it from other forms in a single web page. The method shows how data will be sent to the server if a "Submit" button is pressed, and the action is the server and file that will handle our form's data.

Just like laying the foundation of a table or other HTML object, a form is defined using beginning and ending tags.  All of the components that make up the form (i.e., items that the client can click, type, or scroll on) must be contained between these two tags.  The majority of the components are defined with the <input> tag.  The <input> tag has a number of attributes, but primarily it uses:

• the type -- defines the type of component and
• the name -- identifies the input for the server once the client submits the data.

The table below lists most of the table components along with the tags that create them.

Use the items in the table above to see how each component reacts to input.  The submit button will not work because there is no action associated with sending the client data to a server.

Exercise 1:

Using the components found in the Forms toolbar, we are going to add:

• text entry to place a user's name
• text entry to place the user's e-mail address
• password entry to have the user input a password
• a submit button for the user to send the data to

We are also going to set up an action and a method so that you can receive some response to your form when the user presses the submit button.

First, let's set up the action and method. From the code view, do the following:

1. For the attribute method, set its value to "post". Remember that this sends the data as an attached file to the server after the submit button is pressed.
2. For the attribute action, set its value to "http://csciwww.etsu.edu/tarnoff/labs1710/forms/formresponder.asp"

Notice that the two steps above can also be accomplished by editing the fields in the properties window at the bottom of your Dreamweaver screen.

Next, insert the components to create this form.

1. Click on the Text Field button in the Forms toolbar.
   
   
2. When you created the text field, the properties window should appear allowing you to edit the properties of the text field. If this window doesn't appear, click inside the new text field. The window should look something like:
   
   
3. The window beneath the word "TextField" on you properties window represents the unique name that we will be calling this input. Enter "name" here.
4. The window labeled Char Width is the width of the text field as it will be displayed to the user. Enter "40" here.
5. The window labeled Max Chars is the maximum number of characters that the user will be able to enter in this field. Enter "40" here.
6. The window labeled Init Val is the initial text that will appear inside of the text field when the browser displays it to the user. Enter "Type your name here" here.

Repeat the previous steps in order to create a text field that allows the user to enter their e-mail address. Name the field "email" instead of "name" and change the initial text to show that the user should enter their e-mail here.

To create a password entry, repeat the previous steps for the text fields. Name the field "pw", but this time leave the initial text blank. Once this is set to a password input, any text added here would simply show up to the user as ******. In the properties box, be sure to select the radio button labeled password.

Without a submit button, the form will do nothing except allow the user to input data and stare at it on their browser. To send the data, we need to add a submit button.

1. From the Forms toolbar, click on the Button button.
   
   
   When you do this, the code for the button input should be added to you code and the properties window for the button should appear at the bottom.
2. Note that there are many types of buttons: buttons to set the window back to default values, buttons to send data to a server, and buttons just to do other stuff (duh). The properties window allows for this array of buttons. Therefore, you should set the button's action as "Submit form".
3. The text on the button can also be changed regardless of the button's action. Set the label to "Click here to send data".
4. Under the button's name, once again this is the unique identifier for this button, enter "sub". Your properties window should now look like this:
   
   
   Examine your code window to see the code that was inserted for this component. You should be able to see the attributes that were changed as a result of the changes you made in the properties window.
   
   <input name="sub" type="submit" id="sub" value="Click here to send data">

Last of all, be sure to add text next to each of the form components to direct the user as to what the different fields represent.

Save this file to your local disk, and open it in the browser of your choice. Enter some data and see what happens when you click on the submit button.

The window that comes up in response to the submit button gives you a great deal of information about the form you just created.

Edit your form so that the method is "get" and see what changes. Remember that the get method simply means that the data is sent along with the URL, so after you submit the data, examine the URL/location field on your browser window to see how the data was sent. It should look really odd, sort of like:

Examine this URL to see that all of your data is contained in this string.

Exercise 2:

Bring up a new page in Dreamweaver.  Insert a form to give you the container for all the form components we will be creating. Be sure to set the form method to "post" and the action to the same URL that we used in exercise 1.

Now before we insert the components, let me make sure everyone knows about this type of component.  In the OLDEN DAYS, car radios had buttons to select which radio station the user wanted to listen to (much like they do today).  The difference is that those old buttons were mechanical and stayed pressed in to indicate which station was selected.  When a different button was pressed, the old selection popped out.

Radio buttons on a form are the same way (less the mechanical part).  A group of buttons can be grouped together so that only one button "stays pushed in".

1. From the Forms toolbar, select Radio Group.
   
   
2. A window will appear allowing you to enter the names and values of each of the buttons for the group of radio buttons. Remember that this group of radio buttons will be treated as a whole unit. Even if twenty radio buttons are added to this group, only one value will be sent, the value of the button that the user selected. The name uniquely identifies the group. Set this to "favoritecolors" with no spaces. Use the + key to add radio buttons and the - key to delete them. Add at least three buttons as shown in the properties window below:
   
   
   Press OK when you have finished.
3. Examining your code window should reveal each radio button as an <input> tag
   
   <input type="radio" name="favoritecolors" value="r">
   
   Note that the name of ALL the radio buttons is the same. This is how the browser knows that they are a group.
4. Add a submit button like you did in exercise 1.
5. Test your form by saving it to your local disk and opening it in a browser. When the forms responder responds, you should see one value assigned to the variable "favoritecolors".
   
   

   The following fields were sent via POST
   favoritecolors	b
   sub	Submit

   
   Note that the value, not the name of the selected radio button was sent.

Exercise 3:

Now, let's create a form with a drop-down menu, sometimes referred to as a "select menu").  Bring up a new page in Dreamweaver and insert a form. 

1. Set the form up with the correct action and method and add your submit button.
2. From the Forms toolbar, select the List/Menu button.
   
   
   At this point, your page should look like this:
   
   
3. In the properties window, there should be a button labeled "List Values". Click on this to add item labels and their associated values to our drop down menu. Add four or five different items. In the end, mine looked like this:
   
   
4. Be sure to change the name of the drop down menu using the properties window. The default typically is "select".
5. Now run your form and see if it works. Be sure to examine the code window to verify that the tags that Dreamweaver created were the ones you expected.
6. There is one more thing to play with. From the properties window, selecting "list" rather than "menu" allows you to specify how many menu items are showing at one time. To do this, change the value for "height" in the properties window and view the code in the browser. How do different values for height affect how the form component is displayed?

Exercise 4:

Sometimes, forms look a little messy.  Using Dreamweaver, create the form below using <br> to separate the components.  (Hint:  Holding the shift-key down while pressing return inserts a <br> break rather than a <p> return.)

How does it look?  Like heck, huh?  Well, standard HTML tags can be used within a form.  One solution here might be to use a table to better arrange the form components.  Inside the table, insert a 5 row by two column table.

Now, move each of the components into the table so that they are arranged with a little more order.

Now, use the table alignment attributes to align the parts the way you want them to be arranged.  Also, turn off the borders so that the user doesn't see the lines.  You should have something that looks like this:

Created by David L. Tarnoff for use by ETSU CSCI 1710 and CSCI 5011 students.