Using Dreamweaver to Build a Web form

Once you have set up your datastore, you can use Adobe Dreamweaver to create the elements of your form. Let's start with a sample form that contains a text field, a set of radio buttons, checkboxes and a submit and reset button.

>Open >Dreamweaver to create a web form for your DataStore.

Choose the "Forms" context in the Common Objects toolbar:

Type a sentence or two to instruct your users how to complete the form, then use the Forms toolbar to insert a new form:

If you've inserted the form correctly, you should see a dotted red line.

Text Field: Click on "Insert text field" in the Forms toolbar to insert a text field. Be sure you have positioned your cursor inside the dotted red line, if it isn't already there. You can now add text next to your text field inside the dotted red lines to guide the user - here, I've added the text, "Your name:". You can also use the Properties toolbar to name your text field and to change the properties (such as width or number of lines) of the text field. I've name my text field "Name" and changed the Character Width to 60.

Radio Button:Now, insert a question that requires users to make one choice from several options. This is where you can begin using the radio button form object, which is a little trickier than text fields. You'll insert one radio button for each possible response.

Here, it is very important to give each radio button the same name but a different (unique) Checked Value in the Properties toolbar. That way, the user can only pick one choice. Here, I've given all the radio buttons the name "favcolor" and named the first value "red". Of course, each color will have a unique value name.

Note that we are still working inside the dotted red lines - the whole form will be included inside the dotted red lines.

Checkbox:Repeat the same steps as before, only this time use the check box object from the Form toolbar. Check boxes are similar to radio buttons with one important difference: The user may make more than one choice. Unlike radio buttons, you should assign each checkbox a unique name as well as a unique value.

Submit and Reset buttons: Finally, use the button object from the Form toolbar to insert a Submit and a Reset button at the bottom of your form. Note that the Reset button is the same as the Submit button, until you change its properties (name, label and action) in the Properties toolbar.

Preview: Now you can take a moment to preview your form in a web browser. If all has gone well, your form should look similar to this:

The DataStore Code:Your next step will be to add the one line of code you need to tell the server where to store your data (DataStore). To add this code, you'll need to click the "View Code" icon in Dreamweaver:

This will enable you to see the "nuts and bolts" of your HTML code, so you can see where to insert your DataStore code. The code you are looking for will look like this � note the highlighted line of code:

You want to change this line of code to the following:

<form method="post" action="https://secure.willamette.edu/cgi-bin/datastore.cgi/test_IDC">

Of course, "test_IDC" would be changed to a name of your choosing. As a suggestion, you could use your username, initials or initials as part of the DataStore name.

WHILE YOU ARE HERE, you might want to add an additional bit of code as well to note the date and time the form was submitted. The copy and paste the following code right underneath your "<form name...."> code:

<INPUT type="hidden" name="When Submitted" value="$DATE $TIME">

Publishing a DataStore Form

Upload: Now your form is done, and you can upload it to the public_html folder of your "H" drive or some other web server. You should test the form by filling it out with some sample data and submitting it.

Important tip: You should complete every field in your sample submission, as all subsequent fields will be gathered in the order received. If you get a form back saying the results have been stored, your form is working correctly.

You can view your data here: https://secure.willamette.edu/cgi-bin/dataview.cgi/yourdatastorename

Now you can announce your form, collect data, and save it directly from the web to your desktop if you like. You can also open the data file directly with Excel to work with the data.

Options: You have the ability to edit your DataStore and view it by going to the URL's displayed after you created the DataStore (refer to step number 4). Here are the options available on the "edit" screen: