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.
rendering a user input component require a special identifier which is created by inserting the
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
Although not absolutely necessary when assigning values to the
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.
In this circumstance, the definition of 'value' may be confusing to newbies. The way to keep it straight is to remember that all HTML attributes
have associated values but there is also an HTML attribute called
which itself has a value. Yes I know... They could have made this easier. What can I say? I don't make the rules. I just tell you what they are...
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
attribute-value pair where
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
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...