User Input Components

The following pages are for those who need a reference to all the components available to create an advanced web form. All these components may be inserted in the form element in the same manner described in my tutorial on A Simple Feedback Form.

How Forms Work

If you understand what's going on behind-the-scenes of interactive web forms then it will be alot easier to write up the HTML source code that creates them. To this end you should familiarize yourself with two basic features shared by all user input components: control names and current values.

First of all, 'user' refers to the person interacting with the form and 'user input components' refers to all the things in web forms which permit the user to enter information. This information is entered by either typing text into text fields or by making selections from special interactive lists like checkboxes, radio buttons and dropdown menus.

Now you may wonder how forms actually work. For example, once the user clicks on the Submit button how is it possible to discern which information came from which text field? And how does the mere act of clicking on a checkbox or radio button create usable information?

Well the answer to these questions is not "It's magic!" but rather you, the web author, actually set up a special organizational system in the HTML source code of your web form. This system permits the information entered by the user to be properly received and categorized so that it is ready for handling further on down the line (e.g. read by you in an email, entered into a online guestbook, etc).

What happens is that each user input component in the form is given a control name and then when the user comes along and interacts with that component, they assign a value to that control name. The user interacts with one or more components in the form thus assigning a value to their respective control names and then clicks on the Submit button. At this point, the form is processed by a script which is designed to scan for all control names in the form and retrieve their current values.

How to set up this name-value system is described in more detail below.

Control Names

All elements rendering a user input component require a special identifier which is created by inserting the name="control_name" attribute-value pair into the element start tag where control_name equals any name you like. Each user input element or each group of user input elements must have a unique control name.

Although not absolutely necessary when assigning values to the name attribute used in form special elements, it is a good practice to follow these restrictions:

• Use all lowercase letters.
• Don't begin the name with a number.
• Don't use spaces. If you want to use a name with multiple words, use underscores to link the words together e.g. "my_control_name".

Current Values

As the user interacts with the form, they specify the current value of the input component. In text fields, the value automatically becomes whatever the user types in. With interactive lists like checkboxes, radio buttons and dropdown menus, the value becomes whatever box, button or menu item is selected.

In interactive lists —since the user is not actually typing in a value but rather just clicking to make a selection— you must explicitly associate a value with each input component (i.e. each checkbox, each radio button or each menu item). You do this by inserting the value="value_name" attribute-value pair where value_name equals whatever name you like. It's wise to use a value name which describes the selection the user is making.


*   *   *

More details about all user input components and the name-value system applicable to each are outlined on the following pages. Insert any one or more of the these components in between the <form>...</form> tags to create an interactive web form. For more information about the basic structure of a web form, please see A Simple Feedback Form.

The next page in this tutorial deals with how to make text fields...