Part 1: Create an online 6-question quiz
As mentioned above, HTML forms used in conjunction with a server-side
programming language can be quite powerful. Part 1 of the activity will
submit the quiz responses to a server that can process form results and
email them using Perl or another similar language. You will use hidden
fields to supply the information we have provided you that is
needed to send the form results to the server. To align the quiz questions
and responses, use a table, with or without a border.
- Create a new page and save it as quiz.htm
in your "dreamweaver" folder.
- Add a form tag to the page (Insert panel > Forms
tab > Click the 'Insert Form' icon). In Design view, a form tag is
represented by a dashed red line (if you have selected to show invisible
elements in the View menu). When adding form elements, make sure that
they are inside the dashed red line.
- Create a True-False question with radio buttons for the responses.
In the Forms tab, click the Radio Button icon twice to add two radio
buttons. As you may recall from learning HTML, a group of radio buttons
must have the same name (i.e. "question_1"but
different values (i.e. "true" and "false").
In the Properties panel, with a radio button selected, specify a name,
a checked value, and the initial state (checked or unchecked). Do the
same with the other radio button.
- Create a Multiple Choice question with more than one
correct answer using checkboxes. After writing your question,
click the Checkbox button in the Forms tab to add the appropriate number
of checkboxes. In the Properties panel, give them all the same name
(i.e. "question_2") but different checked values.
Unlike Radio button groups, Checkboxes can have the
same name or different names, but in this exercise we recommend giving
each of your checkboxes in one group the same name. The script that
will process the results (see step 11) will group checkbox responses
together so you will know which ones have been checked out of a particular
group.
- Create a Multiple Choice question with one correct answer
using a select box (menu). After writing a question, add a
dropdown list using the "List/Menu" icon in the Forms tab.
In the Properties panel, give the select box a name. Ensure that "Menu"
is selected next to "Type". This will create a dropdown-style
list and the user can select only one option. Click the "List Values..."
button. In the dialog box that pops up, use the + button to add labels
and values for your responses. The label is what the user will see on
the dropdown list. The value is what is passed to the server.
When viewed in a browser, your result should resemble this:
Label 1
Label 2
Label 3
Label 4
- Create a Multiple Choice question with more than one correct
answer using a select box. Add a question and another select
box using the "List/Menu" button on the Forms tab of the Insert
Panel. This time, select the "List" type, and check the "Allow
Multiple" box. Set the height to the number of responses you will
have. Click the "List Values" button and add the response
labels and values. The result should look something like this:
Label 1
Label 2
Label 3
Label 4
To select more than one response, Control + Click (Windows) or Command
+ Click (Mac).
- Create one Short Answer or Fill-in-the-Blank question using
a text field. Write a question, and add a text box using the
"Text Field" button on the Forms tab. In the Properties panel,
give the text box a unique name. "Char Width" sets the physical
width of the text box using the "size" attribute of the "input"
tag. Set it to an appropriate width for the type of response you are
expecting. "Max Chars" uses the "maxlength" attribute
to limit the number of characters you can type in, regardless of the
physical width of the text box. Tip: Never set the
"Max Chars" field to a number less than the "Char Width"
field. This will only confuse users, who will be wondering why they
can't type all the way to the end of the text box! Most often, you will
not even need to specify a maximum number of characters.
- Create one Essay question using a multiline text field (textarea).
Write your essay question, then add a multiline text box by clicking
the "Textarea" button. A three line text box should appear
on your page. Like the single line textbox, you can specify the width
using the "Char Width" field in the Properties panel. Also,
you can specify the number of lines. The "Wrap" dropdown list
lets you specify how text entered into this field will wrap. Leaving
it at "Default" will suffice for this exercise and most other
instances.
- Add one submit button at the bottom of the form.
Click the "Button" button to add a Submit button. You can
change the text that appears on the button by changing the "Label"
field in the Properties panel. Leave the "Action" as "Submit
form".
- Set the Method and Action of the form. Using the
Quick Tag Selector (at the bottom of the document window) click the
"form" tag to select the form itself. Give the form a name
like "quiz_form". In the "Method" dropdown list,
select "POST" and set the Action to:
http://ia.usu.edu/php-bin/form_mail.php
(without the quotes). Leave the "Target" and "Enctype"
fields blank for this exercise.
- Add 3 Hidden fields. Click the "Hidden Field"
button in the Form tab. HIdden fields are represented in Design view
as a small yellow icon with an "H" on it. Click on the icon
to select it. In the Properties panel:
- Name the first hidden field mail_to,
and set its value to your email address, for example,
myname@hostname.com
- Name the second hidden field subject,
and set its value to what you want the email subject field to be
- Name the third hidden field next_page,
and set its value to an absolute path to a file called "thanks.htm"
in your 5240 folder, for example:
http://hostname/~myusername/dreamweaver/thanks.htm
- Create a new page and save it as "thanks.htm" in
your "dreamweaver" folder. Add some text thanking
the user for taking the quiz.
- Preview your page in a browser (F12) to see if your form elements
are displaying correctly.
- Upload both pages to your remote site.
- Add a link to the quiz from your calendar.htm page.
Save and upload calendar.htm.
- Take your quiz online. You should receive an email with the results.
Part 2: Create an Email Form.
- Create a new document and save it as contact.htm
in your "dreamweaver" folder.
- Add a form to your page.
- Add text boxes for Name, Email, and Subject, and a textarea for the
Body.
- Add submit and reset buttons.
- Use a table to align your fields, if desired.
- Select the Form tag (using the Quick Tag Selector), set the method
of the form to "POST." Set the action to mailto:myname@hostname.com
or your email address. Set theEnctype field to "text/plain". (Using
"mailto:" utilizes the email program on the user's computer,
such as Outlook or Netscape Mail. If there is no email account configured
on the user's computer using one of these email programs, then the form
will not send email.)
- Upload this file to the server.
- Add a link to your email form on contact.htm from your home page (index.htm).
Save and upload this file.
- Try sending email through your form.
Part 3: Create a Jump Menu for navigation on your homepage
This part of the activity combines the use of form elements with JavaScript
to create site navigation. Don't worry, Dreamweaver writes the JavaScript
for you.
- Select a place on your index.htm page to add a Jump Menu as supplementary
site navigation (probably somewhere near the top of the page)
- Add a Jump Menu (from the Insert panel > Forms)
- Add labels and URLs for each page you want your site visitor to visit.
- Save the file and upload it to the server.
- Try it out.
- Add your jump menu to your other pages if desired.
|