Archive for July, 2003

Form Controls

Friday, July 11th, 2003

In the Sample Form in my last post, you will see several different user interface elements — also known as controls under Windows or widgets under Unix. These controls allow you to display data and the user of the page to enter or modify data as well as interact (like clicking on a button).

All these tags live in the <form> tag. The form tag takes an action=”{actionscript}” attribute that script to run when the form is submitted and a method=[POST | GET] attribute that tells who to send the variables to the script.

<textarea>:The textarea control allows the page author to display text and the page user to enter or modify text. You might use this to enter the title of a comment, email address, or name. Options to the tag include name={name} to specify the form variable to hold the value, rows={numrows} to specify how many rows to display on the screen, cols={numcols} to specify the number of characters to display. An initial text value can be placed in the body of the tag (i.e. between the open and close tags. In the Sample Form example, input from the user is taken and passed the the script in the Textarea post variable.

<select>: The select control provides a basic “combo box” or selection list. Options to the tag include name={name} to specify the form variable to hold the selection and value={selection} for which item should be initially selected. The select tag also takes list of <option> tags for the different list items. The option tag has a value=”selectionvalue” attribute to specify what value will be placed in the post variable if that item is selected. In the Sample Form, picking “Selection 2″ will have the post variable Selection be given the value 2.

<input>: The input control can be used in several different ways. The mode is determined by the type=”inputtype” attribute to the tag. I’ll discuss each seperatly.

type=”checkbox”: This will create a checkbox control that is either checked or not. The name={name} attribute defines the post variable and the value={value} attribute defines what value this input control places in the variable (along with the values of any other inputs in the group that are selected).

type=”radio”: This will create a radiobox control (i.e. only one of the radioboxes in the group can be selected at a time). The name={radioname} attribute defines the post variable and the value={value} attribute defines what value this input control places in the variable. NOTE: You create more that one radiobox with the same name to get that radio behiavor between the different boxes.

type=”submit”: This creates the “OK” button that sends the data to the action script.

type=”reset”: This creates the “Cancel” button that clears the data in the form.