ACTION: The value of the ACTION attribute must be either the URL of a program that processes the data in the form or an email address. For now we are using an email address, but that is very unsatisfactory. When I sent the form above, what arrived in my email was an attachment to the message, that when opened that attachment looked like this.

extField=Type+Here+and+I+will+know+%A5ou+are+here&LargeTextField=Type+Here+and+ you+will+see+that+it+is+something+to+do&Radio1=No&CheckBox=1&Menu=20& PassWord=hope&Submit=Submit+Query

In the next lessons we will look at using the URL of the program we use here at the University to processes data in a form and send it as a readable email message.

METHOD: The value of METHOD is either GET or POST. With GET, the data in the form is appended to the URL of the program. You may have seen this used, when you use Web search engines. Lots of stuff you have put in as your search request gets appended to the URL and then there is a search program that uses that to do the search. That is not for us, so we will always use the POST value for METHOD.

There is another attribute that can be in the <FORM> tag, and that is:

It deals with ENCRYPTION of the data sent by the form and will not be of interest to us in this course.

That now brings us to what you will have to have between your <FORM> and </FORM>tags to create a working form.

<FORM ACTION="Mailto:Webmeister@uor.edu" METHOD="POST">
.
.
.
</FORM>

As you go through the descriptions and attributes of the various "input" options in forms, keep scrolling back to the top of this lesson and experimenting with the examples there. That will help you get a grasp on the meaning of the various "attributes" discussed below.

The Text Field

The Text Field allows you to put one line of text in. For example, it might be used as the place to put in your name in an email message. Its tag is:

The attributes are :

TYPE: A number of the tags are named INPUT, and then TYPE indicates to the computer which INPUT type they are. In this case the "TEXT" says this one is a field allowing a single line of text.

NAME: The NAME is required, because that becomes a VARIABLE name where what is typed is stored for transmission.

VALUE: VALUE is what appears in the field when it first appears. This is optional. It is usually there to indicate to the viewer what they are supposed to do. It might be "Last Name" for instance, if that is what you want in there. Those kinds of instructions are better made outside the tag. If you don't want an initial value it is best to put an empty string in for VALUE, so that it doesn't hold on to something someone has put in. That is VALUE="".

SIZE: SIZE is how wide the visible field is on the screen. It is measured in "typed characters."

MAXLENGTH: MAXLENGTH is how many letters may be typed into the text field by the viewer. It can be the same width as the variable field, longer or even shorter. Shorter doesn't seem to make much sense, but something like this occurs occasionally in the registration page of some software. You have a long text field, and suddenly you can't type any more letters. Bad programming!!! Anyway, you sometimes set the SIZE of the field so it looks nice on the page, knowing that there will be a need to type in more characters than are visible on the screen. MAXLENGTH gives you that option. Wouldn't it be nice to have that option of some of the paper forms you have to fill out?

Well, those are the "attributes" of the TEXT FIELD tag in a form. Not very difficult. Here is the text field with the tag shown above. Type in it.

THE TEXT AREA

TEXT AREA is a tag that has a beginning and an ending. The only thing that goes between the opening and closing tags is what will appear as an initial value in the TEXT AREA. Again, you can eliminate that or simply type "". Notice that it isn't considered an INPUT field, but has its own special tag named TEXTAREA.

TEXT AREA provides an entire area to type in text. For example, it might be the place for the message in an email message.

The attributes are:

NAME: As will be the case with all these forms, NAME is required, because the name of the thing is the variable where the computer will store the information from the form field which will be transmitted when the SUBMIT button is clicked.

ROWS & COLS: The ROWS and COLUMNS set how wide and how deep the TEXT AREA will be. This is usually set to fit the aesthetics of the page, because it will scroll, letting the text be any length.

WRAP: Has to do with how the text is presented in the TEXT AREA The possible values are HARD, PHYSICAL, SOFT, and VIRTUAL. The two you should use are HARD and SOFT, though I don't know why anyone would want SOFT. Supposedly HARD and PHYSICAL do the same thing and SOFT and VIRTUAL do the same thing.

HARD (and PHYSICAL): HARD wraps the text when it comes to the end of the TEXT AREA, the way a word processor wraps text. When the message is sent, it is sent wrapped.

SOFT (and VIRTUAL): SOFT wraps the text in the TEXT AREA, but when the message is sent, it is sent as one long line. Perhaps you have received email with that problem.

OMITTING WRAP: This will just let you continue writing text until you physically press RETURN. It will be sent with the CARRIAGE RETURNS the user puts in.

Here are examples of TEXT AREAS with each of the three WRAP settings. The first is HARD. The second is SOFT, and the third has no WRAP attribute. Type in them to see how they will look to the user.

Radio Buttons

The PLURAL is used here, because RADIO BUTTONS are used to "select" choices. There needs to be one RADIO BUTTON for each choice. RADIO BUTTONS are used to restrict selection to a single choice. Check boxes are used for allowing several choices.

You restrict the selection to a single choice by giving each RADIO BUTTON in the group the same name. Then if a second button is selcted, the first button is unselcted.

The attributes of the RADIO BUTTON are:

TYPE: This is another INPUT tag, and the type here is "RADIO".

NAME: As usual required because it will store the value on the radio button selected by the user. Since the different buttons have the same name, only one value will be stored.

VALUE: The value is what will be stored in the "Name" if that particular RADIO BUTTON is chosen and clicked.

CHECKED: This attribute is either present or absent. If it is present, then that RADIO button will be "darkened" by default. If you don't want a default choice, then leave it out.

Here is the example above.

Check Boxes

When there is a need to have multiple selections to a question, then the CHECK BOX is used.

The attributes are pretty much the same as for the Radio Buttons:

TYPE: as you would expect, to let the browser know what type of INPUT field to put on the screen you use the name CHECKBOX.

NAME: As usual required because it will store the value of any check box selected by the user. Notice here that the names of the checkboxes are different as we wish to allow a multitude of choices.

CHECKED: You may have one of the boxes checked on startup, if you include this in the tag. Leave it out, and none of them well be CHECKED.

VALUE: This is the value that is sent if that particular CHECKBOX is clicked on to "check" it.

Here are the three above in a questionnaire format.

The Drop Down Menu and the Scrolling Menu

Look at the code below. The two Form field have different names because they are two different input types. They offer (in this case) the exact same choices to the user. Note that these are SELECT rather than INPUT fields like Check Boxes and Radio Buttons. The only difference in syntax between these two is that the Scrolling Menu has SIZE="4" and MULTIPLE appear in the SELECT tag.

If either one or both of these appear in the SELECT tag, then the thing will be a Scrolling Menu. If both are missing, a Drop Down Menu.

The attributes for these two are:

NAME: Of course NAME as it is the variable and carries the information.

OPTION VALUE This is sort of a combined attribute. It separates the optional choices from each other and also provides the VALUE which, if the option is chosen will be carried when the form is sent.

SIZE: SIZE is used to determine that the thing is a SCROLLING FIELD, and sets the number of choices that will show on the screen.

MULTIPLE: MULTIPLE is also used to determine that the "thing" is a SCROLLING FIELD and allows (with Command-Click) the making of a choice of more than one thing in the SCROLLING FIELD. If you are allowing multiple selections, then you should put a space after the VALUE items in quotes as I have done above. That will put a space between multiple selections when they arrive in an email message. If you don't do this, they will all run together.

Here are the two SELECT item type fields. Play with them.

The Password Field

We will not spend much time on this, as it is relatively unimportant in everyday life. It is an INPUT field, presents a blank field on the screen like the TEXT FIELD. The NAME, SIZE, MAXLENGTH, and VALUE are the same as for a TEXT FIELD. The only difference here is that the TYPE is "PASSWORD." All it does different from a TEXT FIELD is not show the letters, but show "bullets" instead. Check it out at the beginning of the lesson.

The Submit and Reset Buttons

The SUBMIT and RESET buttons were described above. SUBMIT sends the message off to where it is going, and RESET resets the entire form so you may start over.

SUBMIT and RESET have the same attributes:

TYPE: Type is SUBMIT or RESET, respectively

VALUE: This is the name that appears on the button. Look at the example below using the tags above.

Well that is the end of the instruction on FORMS in this lesson. Next you will create a form as an exercise. You will probably want to use tables to make things line up correctly. In the next (and final) lesson.Learn how to modify that form into one that will really send an email message that you can format (at least at the U of R). Oh, I forgot. Then there is the FINAL EXAM.

Exercises 14

Create a form that someone could access on the web, fill out, and send to you as an email message. There should be a background on the page. The exact syntax in the <FORM> tag for ACTION and METHOD are immaterial at this time, just put in <FORM ACTION="Mailto:Webmeister@uor.edu" METHOD="POST"> for this exercise.

The form should have the following:

1. A message at the top telling them what the form is for.
2. A TEXT FIELD for the sender's name.
3. A TEXT FIELD for the sender's email address.
4. A TEXT FIELD for the subject of the message.
5. RADIO BUTTONS to select Gender.
6. CHECK BOXES with a selection of interests, multiple choices acceepted.
7. A DROP DOWN MENU with departments of the company or university listed to which the message is directed.
8. A Scrolling menu of people to whom the message should also be directed. Allow for muliple selections.
9. A TEXT AREA where the message can be written. Decide on WRAP.
10. Both a SUBMIT and RESET button.
11. A message at the bottom thanking them for contacting your company or university.