WEB DESIGN AND DEVELOPEMENT: Creating Forms in Dreamweaver

Creating Forms in Dreamweaver

Before beginning the lesson on forms, please have any 4 multiple choice questions already made up. Each question needs to have four responses. If you would like to recreate my M&M quiz as practice, the questions can be found at the M&M quiz website.

A second comment before we begin with the terminology. Because of the exercise we are creating, I am having you put each question in a separate form. Depending on your reasons for creating a form, you may want to put all of the questions in a single form tag.

Terminology

Before we begin creating our tables, there is some basic terminology you will need to know.
Input - allows you to input data into your HTML document. There are many different types of input.

We will examine 5 here, so that you know and understand the differences between them. We will only really be working with two of them, the radio and the text.

TYPE = Radio- Radio buttons allow the users of your form to select only 1 response for a multiple choice question.

TYPE = Checkbox- Check boxes allow the users of your form to select multiple answers to a single question.

TYPE = Selection List- create a (selection) list of possible responses to a question. These are the type of input where there is a response shown, and a drop-down list for the user to select.

TYPE = Text- Text boxes enable the user to enter a single line of text. An example would be asking a person to enter his or her name or address.

TYPE = Textarea- TEXTAREA boxes are similar to TEXT boxes, except they allow the user to enter multiple lines of text. An example where TEXTAREA boxes are used is in the comment section of a form.

TYPE = Button- Creates a button. Types of buttons include submit, reset, or just button.

VALUE - the value of the response chosen by the user. In other words, the users response to your question.
NAME - is the name of the question or the name of the input.

JAVASCRIPT IS CASE SENSITIVE. That means that a word like Donna is different than donna or DONNA. Be careful here and minimize the number of times you use capital letters. That will make things easier for you.

Inserting a Form Into Your Document

To insert a form into your document, from the menu bar, select INSERT >> FORM. There will be a red-dashed, retangular box on your screen. We will be typing the contents of the form into this box. Notice the change in the selection properties box.

See the image below.

Inserting Text Into a Form

The first thing we will want our form to do is ask the user for his/her name. To create this form, make sure your cursor is inside the red-dashed box. First, type something like "Please Enter Your Name: "

Then from the menu bar, select INSERT >> FORM OBJECT >> TEXT.

The selection properties box should resemble the image below.

You will also notice a long rectangular box next to your text. This is called a text field.

The box under the words TextField in the left part of the selection properties box is where we will name this input. Naming the input is important because our JavaScript will require the name of the input to process the input. Call the input "input1". Since some students may have long names, let's make the length of the box 50 characters.

To do this, in the box labeled Char Width, type 50. Your selection properties box should now look like the one below.

Inserting Radio Buttons into Your Form

To ask the multiple choice question, we will want to use radio buttons as our method of input.
Because of the way the JavaScript is written, we will be putting each question into a different form.

Step 1: From the menu bar, select INSERT >> FORM.
Step 2: Type in your question. I'd suggest numbering your questions to make them easier to read. For example: 1. What is the newest color M&M?
Step 3: From the menu bar, select INSERT >> FORM TYPE. Select Radio as your option. The selection properties box should resemble the one below. You can leave the name of the input as radiobutton if want. Leave the Initial State as Unchecked. Checked would mean that the answer was automatically pre-selected.

Step 4: Add three more radio buttons and three more responses. When finished, your first question should resemble the form below.

Repeat the steps above for the other 3 questions of your quiz. When done, save the file to your disk. We will be using this file again when we create the JavaScript to grade the quizzes.

Buttons

In order for our form to either be sent to our JavaScript, we need to have some way of sending the information. This is the purpose of a button.
Step 1: Insert a new form into your webpage.
Step 2: From the menu bar, select INSERT >> FORM OBJECTS >> BUTTON.

Your selection properties box will resemble the one below.

Step 3: Under Action, select None. Notice your button will now say "Button" instead of Submit.

Step 4: Under Label, type something like Ready To Be Graded.

Step 5: Click on the little pencil on the very right part of the selection properties box, directly under the ?. This is the EDIT box. You will be presented with the box below. Type in the following. onclick="first()" Include the double quotes when you edit the input tag. This is what will call the JavaScript function we will be writing in the next lecture.

When you are done, you should have a button like the one below.

Assignment 1: Create your own 4 question self-grading multiple choice quiz. If you are creating a mathematical quiz that involves fractions, formula's or anything that requires the questions or answers to be images, use Snag-It to create an gif or jpg file for each statement. Then just input the image instead of typing the question or answer.

Assignment 2: Create your own 4 question self-grading fill-in-the-blank style quiz. The assignment is basically the same as the one above, except your input fields will be of type text instead of radio. To see a sample quiz, go to the fill-in quiz I have at the website.