CS 4, Summer 2006: Lecture 5: HTML Forms

Overview

• Form structure
• Some input tools
• What happens to the input?

Forms

How do we get information from the user (and know what that information is about)?

• A form (established with the <code> tag) establishes a section of a document that will take input.
• In addition to new input elements, below, the form can have any of the HTML elements that we've seen before. This allows you to label the input elements, provide instructions, etc.

Example: Application to Cross the Bridge of Death

Stop! Who would cross the Bridge of Death must completely fill out this simple form, in triplicate, and have it signed by his or her supervisor, ere the other side (s)he see!

Input tag

Most of the input elements in the example form are generated using the <input> tag. In general, the form of an input tag is as follows:

<input type="type" name="name" value="value">

The type attribute specifies what kind of input element it will be. Some of the common types include:

• type="button" -- a push button (like the "Poke" and "Prod" buttons above). Buttons are usually used to control other actions, like the keys on a calculator. (We'll see later in the course how to make them actually do something.)
• type="checkbox" -- a check box (like the animals in the above example). Each check box may be either "checked" or "unchecked", independently of any others.
• type="radio" -- a radio button (like the colours above). Radio buttons occur in groups, so that when you push in one of them, the others in the group pop out, like the buttons on a car radio (most new cars have electronic buttons nowadays, but the analogy is still useful). Radio buttons are grouped using their name attributes.
• type="text" -- a single-line text field. The size attribute may be used to suggest to the browser how many characters should be permitted.

Names

In order to refer to an input element, you need to give it a name, which is just some string of characters. The name attribute is used to assign a name to an input element. While it is not required that you give each input element a name, it is recommended, since without a name, you won't have any way to refer to the input element when you actually go to use it.

The name attribute is also important for radio buttons -- all the radio buttons which share a common name value are considered part of the same "button group", for the purposes of figuring out which buttons should pop out when you select one of them.

Other Input Elements

There are two other input elements worth noting in the above example. These are the <select> tag, which was used for asking about your nationality, and the <textarea> tag, which is used to obtain text inputs with multiple lines (the nature of your quest).

• The basic format of a <textarea> tag is as follows:

  
  <textarea rows="r" cols="c">
  Whatever text you want to have appear in the area by default (or
  nothing, if you want it to remain blank)
  </textarea>
  

  It is worth noting that <textarea> behaves somewhat like the <pre> tag, in that spaces in the text between the open and close tags are preserved. The rows and cols attributes do what you would expect -- they specify how many rows and columns the text area should have when displayed in the browser.
• The basic format of a <select> tag is as follows:

  
  <select name="name">
     <option value="value1">Option 1 text</option>
     <option value="value2">Option 2 text</option>
     <option value="value3">Option 3 text</option>
     <option value="value4">Option 4 text</option>
  </select>
  

  Most browsers seem to display the select tag as some kind of pop-up menu; however, the World-Wide Web Consortium (the committee that actually maintains the HTML specification), cautions against relying on that particular implementation, since browsers are free to do it in some other way.

  The select tag usually permits only one of its options to be selected at a time. However, select also supports an attribute called multiple, which changes this behavior.

Doing something with the values

Later this term, we'll see how to make a web page dynamic, reacting to the values entered in forms, button presses, etc. With that JavaScript-based approach, all the processing is done on your PC, within the browser. An alternative, which we won't cover beyond the above example, is to submit the form data to the web server, to be handled by a program there. (This is largely the way your interactions with on-line stores and so forth are handled. However, Google Maps and other such dynamic sites are a kind of hybrid, combining server-based and browser-based processing.)

For server-based processing, we need to specify the form's method attribute (can be "post" or "get"; not important here) and its action attribute (the URL of the program that will process the form data). For illustration purposes, the example form is processed by a program that simply echoes the input values.