User Input Components
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
The
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
value attribute: 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
value 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...
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...
| INTRO | TOP | NEXT ~> |
