Forms

Videos

Notes

Forms let users send us information through web pages. If you have ever shopped online or filled out an information request, you have used this feature.

To start a form is fairly simple. You use the FORM tag and it's corresponding end tag.

<form> </form> You need to include two attributes to make the form actually send information. The first is the method attribute which describes how the data is encoded. There are two options: post and get. For our purposes, their function is essentially the same. I will use post in most of my examples. The second attribute is the action which describes where and how to transmit the data from the web page. This is set equal to a program that is on a server that can process the form information. This is often called a CGI (Common Gateway Interface) file. I have written a CGI for you to use that nicely displays the contents of your form that were submitted. To use this CGI, you set your action attribute equal to the URL of the file:

<form method="post" action="http://zaphod.cs.umd.edu/cgi-bin/reflector.cgi"> </form> Once we have that setup, we just need to add the data fields for the user to fill out. Within a set of form tags, you can include any regular HTML, plus the input fields of a form.

For any type of form widget, you need to include the name attribute. When information is transmitted to you, it is sent in name value pairs. If you see something like this:

You would receive something like city="Arlington, VA". You need to be able to identify the information coming across, and the "name" attribute allows you to do that. There is also a value attribute which lets you specify a default value for a field (like Arlington, VA above) or to specify the actual value to be transmitted for something like a checkbox where the user does not type in information. We will see examples of these attributes used after looking at the different types of input available.

After you have started the form tag, there are a variety of input tags you can use. The tag structure is <input .... followed by attributes. The type attribute controls what type of widget appears. This table lists the different types and shows examples of each.

Type	Appearance	Function
text		User can type text
checkbox	Checkbox 1 Checkbox 2	User can check multiple boxes
radio	Radio Button 1 Radio Button 2	User can select only one button
password		User's typing is hidden
submit		Sends the data
reset		Resets the default value for each field
hidden		Send information without the user seeing it
image		Clicking this image is the same as a submit button

In addition to the input types above, there are two that do not start with <input. These are textarea and select.

Textarea allows you to create a box like this:

To create one of these, you start with the tag <textarea name="typeOfData"> and end it with </textarea>. Between these tags, you can include default text which will automatically show up in the box and users can keep or delete. You can specify the size with the rows and cols attributes.

The other non-standard input type is the selection list. It works much like other lists we have seen. It starts with a tag indicating the type of the list, in this case, <select>. Then, every item in the list, instead of being preceeded with a <li>, is preceeded by the <option> tag. you do not need to use the </option> tag, but you should always use the </select> tag. A selection list looks like this:

The code to produce that list looks like this:

<select> <option>All of the above <option>None of the above <option>War of 1812 </Select> You can also make a list that allows for multiple options to be selected. To do that, you add the "multiple" attribute to the select tag. multiple is not set equal to anything, so the code looks like this:

<select multiple> <option>All of the above <option>None of the above <option>War of 1812 </Select> <P>

And the result looks like this:

Note that I left it off for clarity in the above examples, but you still need to include name and value attributes in these selection lists. The name attribute goes in the select tag and values go in each option tag. The browser will not just recognize the text next to the option tag as the data being submitted.

Every tag, input, select, and textarea, must have a unique name. The only exception to this are the submit and reset tags, which don't need names. Some input types also need to have the value assigned to them. Radio button and checkboxes need values because your user can't type anything in. So if you are having someone select their favorite season, your form may look like this:

Fall
Summer
Winter
Spring

<input name="season" value="fall" type="radio">Fall<br> <input name="season" value="summer" type="radio">Summer<br> <input name="season" value="Winter" type="radio">Winter<br> <input name="season" value="spring" type="radio">Spring<br> but the words you have next to each button are not recognized as form data. Thus, for each button, you have to specify the value that will be encoded if someone clicks on it.

It is also important to note that for checkboxes and radio buttons, the names of all of the boxes/buttons in a field must be the same. This is not a violation of the rule that names must be unique, because the radio buttons and checkboxes that are in the same group are basically just using multiple tags to let people make one selection. For example, if you are having someone select their favorite season, you must set the name attribute equal to the same thing for each radio button. Otherwise, the browser won't be able to achieve the effect on only allowing one to be selected. For checkboxes, although you won't necessarily see a difference, you generally will want all of the information a person inputs for the same data group to be put together.

Forms

Videos

Links

Notes