User Feedback HTML Form

By Amrit Hallan
2005-06-01


User Feedback HTML Form
Highlight: Finally we come to Forms. After going through this celestial section you'll be able to make your own HTML feedback forms so that the visitors can send you feelers about what are their intentions vis-à-vis you and your Web site, and other sundry things that may or may not concern you.

As usual we have a tag called, illuminatingly, <form> </form>. Whatever lies within belongs to this tag and is going to be a part of its definition as a whole.

The basic infrastructure of a user feedback form manifests itself like this:

<form name="myform" method="post" action="process_form.pl">
<input type="hidden" name="email_ad" value="your email id goes here.">
<input type="hidden" name="subject" value="put your subject here.">
<input type="hidden" name="redirect_page" value="thankyou.html">
<p>Please enter your name: <input type="Text" name="Vname" size="25">
<br>
<p>Please enter your email: <input type="Text" name="Vemail" size="25">
<br>
<p>Please enter your comments: <textarea cols="25" rows="5" name="Comms"></textarea>
<br>
<input type="submit" name="S1" value="Submit">
<input type="reset" name="R1" value="Reset">
</form>

Good! Now let us take the bull by its horns, and ponder over the individual parts one-by-one in a scholarly manner. An average <form> has the method, name, and action attributes. There might be more tags, but in this nascent stage of Form learning, let's stick to these three attributes.

A method can have the value "post" or "get". "Post" is used when we are just "submitting" the information that is to be stored somewhere, but, "get" is used when we are retrieving information according to the information "submitted". A good example of "get" is the search engine box, where you enter the word to be searched, and then the program displays the information retrieved. If this doesn't make things clear, just remember that GET allows you to see the data being submitted in the URL and POST doesn't.

The attribute name is not vital to the existence of a form, but later on, in a SCRIPT, if you desiderate to access the individual components of a form (for example, validating the user input), then you need it.

Action is where all the action is. This attribute holds the name of the file that is going to do something to the fields entered by the user. It holds the functions, and the "hidden" fields definitions in order to perform some task. The above file, process_form.pl (a PERL file), we assume, emails you the details entered by the user. This file mostly lurks in the CGI-BIN folder of your server, and if you are hosting your Web site on a commercial server, the host company provides this sort of file.

Ok now, hidden fields. Generally what conspires is, the PERL file needs an email address so that the entered information can be dispatched to that address. Then it might sound decent to give a subject to that future email, so that wherever it goes, the recipient can make out what sort of email it is. It would look extremely impolite if you do not appreciate all the pain taken by the visitor - hence, it calls for a thank you page redirection.

In this manner, there could be tens of "hidden" field definitions.

<input type="Text" name="Vname" size="25">

displays an empty field box of size 25 characters. And so on…

"Submit" tells the browser to invoke the file "process_form.pl" and "Reset" empties all the fields in case you want to re-enter all the values. Later on, we'll explore other means to manipulate the "submit" field so that we can make sure that the person entering the information into the fields is not a complete dud.

A radio button is a GUI component that lets the user select one, and only one option from a given list of options.

<p>Would you like to receive promotional emails from me? Yes <input type="radio" name="yesno" value="Yes">
No <input type="radio" name="yesno" value="No">

Both the input definitions have the same name because in a particular set of multiple radio buttons, only one choice can be made. You can have as many radio buttons as you want by giving them single name but varied values.

The following portion lets the user choose an option from a drop down list:

<p>Your profession is: <select size="1" name="profession">
<option value="Engineer">Engineer</option>
<option value="Doctor">Doctor</option>
<option value="Swindler">Swindler</option>
<option value="Lawyer">Lawyer</option>
</select>

Saying in the clichéd manner, last, but not the least, is a check box which is displayed by the following code:

<p>Acceptable <input type="checkbox" name="checky">

Please remember that all this paraphernalia comes within <form> </form>.

In the next section, we'll wrap up HTML and dive into the depths of JAVASCRIPTS and VBSCRIPTS. We'll also learn how to make the above partaken form cooler by incorporating SCRIPTS. Till then, Ciao!

Tutorial Pages:
» User Feedback HTML Form

Related Tutorials: » Enrich Your Web Applications » Microsoft Complicates HTML Emails With Outlook 2007 » Testing Your Forms for Hijacking Vulnerability » Control Your Domain Registration Data » HTML Forms POST, GET » HTML Tables