Class Exercise – Creating a Web Page that Gathers User Input

We will create a formlike this -- that emails user inputs when the user clicks a Submit button.

  1. Create an empty plain html file.

File – new Page (Black page, HTML). Then click on Create.

  1. Insert a form inside your web page.

All web inputs must be inside a form, so click in your web page (in the design pane) and select this from the DW menu:

Insert – Form – Form

(note that there are two Inserts at the top of the screen, click on the top one)

For “Action”, enter this (but substitute your own email address):

Type this very carefully, letter for letter, or else your form will not work.

For “Method”, select “post”, then click OK

Then, you’ll see a red box in your web page (the design pane) that marks your form.

  1. Insert a table to hold labels and inputs.

Since we want our input form to be nicely aligned, we’ll insert a 6x2 table inside the red box.

Click in the red box (that indicates the form).

Select (from the DW menu), “Table – Insert” and enter 6 rows by 2 columns.

Type in all the labels (like “Name”, “Sex”, … “Comments”) in the cells of the left columns.

  1. Insert a textbox to hold the user’s name.

Click in the upper right cell.

Select (from the DW menu), Insert – Form – Text Field.

Enter an identifier for ID. Since this text field will hold a name, “txtName” is a good ID.

  1. Enter a radio box to hold the user’s sex.

Click in the right column of the second row

Insert – Form – Radio Group (not Radio Button)

Enter a representative identifier for the radio box (“rdoSex”) and then enter labels (“Male” and “Female”) that will show on the form) and the values (“M” and “F”) that will be sent in the email.

  1. Enter a List/Menu to hold the user’s class in college.

Click in the right column of the row that’s labeled “Class”

Insert – Form – List/Menu

Then enter an identifier that is representative of the data that will be stored (class).

This will insert an empty list box as shown on the next page.

Click on that list box (in the web page pane) so you can set the properties (in the bottom pane).

Click on the “List Values” button (on the right of the bottom Properties pane) to specify the list values (Freshman, Sophomore, Junior, and Senior) – as shown. Click on OK.

  1. Insert a Text Area to hold user’s comments.

Click in the cell to the right of the “Comments” cell and insert a Text Area, as follows.

Form – Insert – Textarea

Enter a representative identifier (like “txaComments”) and click OK

  1. Insert a Submit button.

To insert the Submit button, click in the bottom cell of your table and enter this from the menu:

Insert – Form –Button.

  1. Test your form.

Click on the world icon just above the webpage/code pane to preview in IExplorer (or FireFox) to test your form…

Enter some values into all the inputs, then click on the submit button.

If all went well, you should see something like this:

1