HTML and Forms

Separate Speaker Notes

Slide 1:

This presentation will cover the two handouts on forms:

Web 10 and Web 13.

Be sure to use Netscape when testing your forms. Netscape will send the form as described. Explorer brings up an email message. Note there are also problems with AOL when dealing with forms.

The forms we are working with are the simple kind of mail forms and there is support problems for them. These same forms can be handled using CGI etc. and then there is better support - CGI is not covered in this course. However, the form concepts are the same.

Slide 2:

This slide shows a form that can be filled out by the user and submitted via e-mail to the designated address.

This is not a secure form, it should not be used for confidential information.

Notice the different types of data entry that are allowed. There is a box for the name (the developer controls the size), check boxes, radio buttons, a comments area and buttons to submit or clear the form.

The next slides will show the code used to generate this form.

Slide 3:

This is the HTML to display the form shown in the previous box.

The part of the code that produces the form is between <FORM> and </FORM>.

The <FORM contains attributes: ACTION, METHOD, ENCTYPE. You should read about these in one of the articles in my links.

The ACTION here is to mailto: followed by an e-mail address.

The METHOD is post and the ENCTYPE is TEXT/PLAIN.

The form will be received as shown in the next slide.

The details of this are covered in slides to follow.

Slide 4:

After filling in the form in the left panel, I pressed submit. The form was then sent to me as e-mail. The message received had the information as shown.

When you look at the code, notice where name, course, major and comments came from on the form.

Slide 5:

This shows the part of the form where the FORM is set up with ACTION followed by a mailto address. In this example the address is mine, so I will receive the contents of this form at my site. The METHOD and the ENCTYPE define how I will receive the mail. Be sure to read about this in articles or tutorials.

INPUT is followed by TYPE. If the TYPE="TEXT" a data entry box is set up. If the TYPE="CHECKBOX" a check box is set up. Note that the VALUE of check box is sent while the name after <INPUT...>is the name that appears on the screen.

Slide 6:

Note: multiple checkboxes can be checked but only one radio button can be selected.

The radio button selected will send a value under the name major - see e-mail received at the bottom of the page.

TEXTAREA is for comments. NAME="comments" causes the word comments to be sent. The word COMMENTS designated after <TEXTAREA...> actually appears in the comments box and gets sent in the e-mail Personally, I think it should be omitted so the comments box comes up empty.

The <P>Comments: appears on the screen telling the user to enter comments.

Slide 7:

This is the form shown in web13.html. This form introduces more FORM concepts.

Slide 8:

This slide shows the data that was received when the form was filled in and submitted.

Note: The name does not hold the whole name but the size is not fixed. When you type in a name that is too big, it will scroll. Check out this feature in the articles or tutorials.

Note: The city fields use scroll bars. They are set up differently. Look at the code on the next slides and also be sure to read about this in the articles and tutorials.

Slide 9:

The output from the name, city1, and city2 are shown at the bottom of the screen. Note again that name has a size of 10 but the data entry is not limited to 10 characters. The size simply shows what will appear on the form.

Slide 10:

Note: There are two variations on the SELECT illustrated here. SIZE shows how many OPTIONs will be displayed and MULTIPLE allows multiple selections. The user should be prompted to hold down SHIFT to select OPTIONS that are adjacent and to hold down CONTROL to select multiple choices that are not adjacent.

Slide 11:

The information on this part of the form is taken from web10.html.

Note again that the button can be given any name in VALUE but it must be TYPE="SUBMIT". This is the command that causes the e-mail to be sent.