Interactive Forms
This section is split up into two parts. The first part will run you through the entire process of creating a simple feedback form that is fully functional and will email its contents to you when the user clicks on the Submit button. This includes the following:
The second part of this section is a rundown of all the various form components you can use in order to create a more advanced web form. This includes the following:
- Some fundamentals about all user input components...
- How to make single-line and multi-line text fields...
- How to make checkboxes and radio buttons...
- How to make dropdown menus...
- How to make buttons to activate your web form...
- How to layout your form using tables and some special form elements....
The following provides an introductory paragraph and a link to each page in this section:
A Simple Feedback Form
To compel the average web surfer —arguably one of the most demanding individuals on the face of the earth— to click on an email link, wait for their email program to open up, remember how the email program works and then send you an email is, in fact, a formidable task (Oh bother! My email program takes 7.2 seconds to load! You can't be serious!!)
Hence, as a matter of convenience (and to show everyone that you are above the cut by displaying some advanced web design skills) you might want to create a feedback form that visitors can use to send you an email directly from your contact page. The following is a crash course on how to create such a form...
Installing NMS FormMail
Writing up the HTML source code to render a simple feedback form is only half the job. Now you will have to install a form mail script that will actually process the contents of the form when the user clicks on the Submit button. For the following tutorial, we'll use the NMS FormMail script...
Debugging Your Setup
Okay, let's say that:
- You created a simple feedback form page.
- You took a run through the Iron Spider tutorial on how to install NMS FormMail.
- You filled in your feedback form and clicked on the submit button.
- You were confronted with an Application Error page or, worse, the dreaded 500 Internal Server Error page.
- You repeated steps C and D several times because you didn't know what else to do.
"NMS FormMail is a quality form-to-email Perl script. This is just a simple omission or typo on my part. It CAN be fixed."Alright then, so now that you are in the right frame of mind, let's get down to some simple debugging...
My Web Host is Out to Lunch
I once had a web host whose technical support assured me that, Yes, I had a
cgi-bin, and Yes, I could run Perl scripts but, No, they did not know the path to Perl. (No kidding.) If you're trying to install NMS FormMail and your web host's technical support is similarily "out to lunch" (either literally or figuratively) but you know you have a
cgi-bin then don't give up just yet. First of all, you have just reached the bottom line of hardcore web development which clearly states:
YOU ARE YOUR OWN TECHNICAL SUPPORT.Now..
Bravely step forward, take the bull by the horns and try the following steps to derive the correct path to Perl (a.k.a. shebang line). This will then allow you to run a special Perl script which will guess the correct path to Sendmail...
User Input Components
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...
Text Fields
You can create single-line text fields or multi-line text fields into which the user may type information, e.g. a name, an email address, comments, etc. ...
Checkboxes & Radio Buttons
Interactive web forms wouldn't be much fun (or convenient) if all they did was provide a series of text fields for the user to type in their information. Quite often the input that you need would be better obtained by simply supplying a list of choices. The user could then quickly scan through the list and select an applicable item. You can create such lists by using either groups of checkboxes or groups of radio buttons...
Dropdown Menus
You can prompt users for input by offering them a list of items displayed in a dropdown menu. The user clicks on the down arrow to open a list that 'drops down' and then clicks on a menu item in the list to select it. The items in the menu list are, by default, configured to be mutually exclusive of one another (like radio buttons) but can also be set to support multiple selections (like checkboxes). Dropdown menus offer the distinct advantage of being great space savers (they also look cool).
Push Buttons
Okay so, presumably, you know how to populate your web form with various user input components like text fields, checkboxes, radio buttons and dropdown menus. All that remains now is to provide a means to submit the form. You may also want to offer the option to upload a file or reset the form back to its original state. These actions are all accomplished by clicking on a button and you create buttons by using either the input element or the button element...
Layout and Presentation
A web form filled with a daunting array of text fields, checkboxes, radio buttons and dropdown menus may actually scare a potential user away instead of prompting them to submit information. Hence, the layout and presentation of your web form can have a profound impact on how inviting it looks and how easy it is to discern what it is all about.
HTML tables can be used very effectively to layout your form components. You can also use two special form elements, fieldset and legend, which will help spiff up your form's appearance and structure...
| HOME | TOP | NEXT ~> |
