Lab 3: HTML Forms

272 Labs Page

Lab 3 Example

Instruction
Starting Forms
Text boxes
Password boxes
Radio buttons
Check boxes
Menus
Submit/Reset
Generic buttons

Lab Assignment

Instructional Segment

To illustrate various feautures of HTML forms, we will be using a very simple survey I've developed. The survey can be found at 272-lab_3EX.html. Students may want to look at this form in advance of reading through the instructional material presented here.

Starting an HTML Form

HTML forms begin and end with a <FORM> tag. One of the attributes of this tag is METHOD. Essentially there are two methods to choose from, GET and POST. When we get to the CGI lectures, we will discuss the differences between these two methods and conditions when you'd choose each. For now, we will simply include METHOD=POST.

In addition, FORM tags typically have an ACTION attribute. ACTION basically points to the location on the server where the CGI script can be found to process the submitted form. Again, this is something we will cover later in our discussions of CGI. For now, since we have no CGI script, we will leave this attribute out.

Technically, we can leave out the FORM tag altogether and still create and place all the form elements (text boxes, radio buttons, etc.) on the page. However, to get everyone in the practice of thinking about forms, we will add a <FORM METHOD=POST> and a closing tag with each form. Also, it should be noted that there can be more than one form on a page.

Creating Text Boxes

Text boxes are typically used to collect information like name, address, phone, etc. In addition, text boxes can be expanded beyond a single line to allow users to add comments. In the example we have, both of these uses can clearly be seen.

Below is the First Name text box and the HTML that created it.

  First Name:

  First Name: <INPUT TYPE="text" NAME="F_Name" SIZE="12" MAXLENNGTH="20">

INPUT TYPE is used to determine what type of form element to create; in this case we specify a text box with TYPE="text" We also give the box a name so we can later use the data in some program or application. Lastly we set the size of the box and the maximum length of the input accepted. These last two items need not be specified. The default is SIZE="20" and no limit on MAXLENGTH.

It is possible to add a formal label to the box (like "First Name") using HTML 4's LABEL tag, but neither Netscape or MSIE support it right now (maybe because it's more hassle than it's worth). In this case, we just added the text "First Name: "prior to the HTML code. Works for me!

If I wanted to have a default name in the text box -- such as "Worf" -- I could add this by using the attribute VALUE="Worf" in the INPUT tag. In most cases we wouldn't want to do that, but if we were reading information off a cookie on the machine, then adding this information would be a nice touch (but require more than just HTML!).

To create on of the larger comment boxes in the example, we use the following HTML:

  <TEXTAREA NAME="IDS Strength" ROWS="5" COLS="75" WRAP></TEXTAREA>

In this case, we are creating a text box that spans 75 columns and 5 rows. The WRAP attribute simply means the text overflow will wrap down into the next line rather than continuing on in a straight line. (I hate when sites forget this! It's one thing to do this for coding, but a real pain for users who are trying to write comments.)

Also note that there is nothing between the opening tag and the closing tag because I didn't want to fill the box with some preset text, but if I wanted the box to have some annoying message in it (like "your comments here" -- as if I'd put them somewhere else), then if you add them between the tags it will show up in the text area box itself. (okay, okay, I'll try to stop the sarcasm now.)

Setting Password Boxes

Password boxes are just like text boxes except that any text entered into the box is not displayed directly, but rather is replaced by dots or other placeholders. TYPE in this case ="password" and everything else is the same as text boxes. On the sample form I used the password box for students to enter their IDS1 account password with the following HTML:

  IDS Server Password: <INPUT TYPE="password" SIZE="15" MAXLENGTH="15">

Creating Radio Buttons

Radio buttons are used to give users an opportunity to select only one of a group of items, much like the radio buttons on a car stereo only allows you to choose one station at a time. TYPE in this case ="radio" but it is also important in this case to use the NAME attribute since that will link the appropriate buttons together. Below is one set of radio buttons from the form and the HTML to generated it.

In this case, the three buttons are linked together automatically because they all have the NAME="sex". If you click on one button, the previous option is automatically removed. (go ahead, try it now if you'd like.) In addition, the default value was set to the third option by adding CHECKED to its tag; if this was not done, no option would be the default and no button initially selected. (There are examples of this in the 3EX form.)

In addition to the NAME attribute, the VALUE attribute is important because that is the value that will be passed to the server when the form is submitted -- if that option is selected. If you forget the VALUE attribute, then the button is essentially useless because no information from this set of buttons will be passed on and acted upon. It's important the forms look good, but even better that they do something :-)

Using Check Boxes

What if you want to give people a chance to choose more than one option? Radio buttons wouldn't be the answer in this case, but check boxes would be fine. Check boxes are used in the example form when we are asking which of the following electives would be of some value. Perhaps no option is appealing, only one is worthwhile or 3 or 4 are interesting to a student (maybe all of them!). With check boxes the user can choose as many or as few as he/she wants.

In terms of HTML, check boxes are the same as radio buttons, with NAME and VALUE attributes, but the INPUT TYPE="checkbox" rather than "radio".

Making Menus with HTML

Just to illustrate how to make menus, I threw in an item in the form asking about students' favorite IDS professor. Using the SELECT tag followed by a list of OPTION tags (and a /SELECT tag), I can create a menu. Below is the HTML with created the menu on the example survey.

Again it is important to specify a VALUE for each OPTION so that some information will be returned to the server if a user makes a choice. In case a user doesn't make a choice, I've selected myself as the default value by adding SELECTED to the OPTION tag. (I know you'd all prefer Captain Picard, but I need all the support I can get! ;-)

In this case, it is a pull-down menu because the SIZE in the SELECT tag is set to 1. If it were set to a greater value, it would be a scroll down menu.

Submit and Reset Buttons

SUBMIT and RESET buttons are special buttons which submit the form data to the server for processing or clear the form, respectively. The INPUT TYPE="submit" for submit buttons and ="reset" for reset buttons. ("Obvious, one would think...") In these cases, however, the VALUE attribute does not pass information to the server but rather sets the text within the button. Not everyone thinks submit and reset are very descriptive or potentially confusing, so the developer can change this to whatever he/she wants. In the case of the sample form, I have added long names -- probably not much of an improvement, but more fun for me.

Generating Generic Buttons

To add a generic button, you can type the following HTML:

   <INPUT TYPE="button" NAME="what" VALUE="This button does nothing">

This creates the "does nothing" button on the example survey. The button says it does nothing, but I suspect that after next week's lab it will do something...In the meantime, we've finished covering the basics of HTML forms and are ready to move on to the lab assignment.

Lab Assignment

To be given out in class.

These pages are relevant for the Fall 1999 semester.
Any questions or problems with these pages should be sent to Professor H.