Advanced Web Pages

Week 3



Form Input Elements:

Masked Input:



Another type that may be used is called PASSWORD. It behaves like a conventional text control in a form, except that the user-typed characters do not appear on screen. The browser will obscure the characters in a masked text to keep such things as passwords and other sensitive codes away from prying eyes.

To create a masked text control, set the value of the type attribute to password. All other attributes and semantics of the conventional text control apply to the masked one. Hence, you must provide a name, and you may specify a size and maxlength for the field, as well as an initial value. This initial value may be displayed or not displayed depending upon the browser and version of browser using. When one types in a value, it is obscured by either asterisks or bullets in most cases. In some cases, another character may be used.

They typed-in value is only obscured on screen; the browser transmits it unencrypted when the form is submitted to the server, unless you use a special secure-forms server. So while protected from prying eyes who may be looking at the screen, devious bad guys may steal the information electronically.


<INPUT TYPE="TEXT" NAME="name" SIZE=30 MAXLENGTH=50 VALUE="Last, First Middle">

is replaced by



Hidden Input:

<INPUT TYPE="HIDDEN" NAME="field_name" VALUE="field_value">

Here input is hidden from view. It is not a matter of concealing anything. It is a way to embed information into your forms that cannot be ignored or altered by the browser or the user. The <INPUT TYPE="HIDDEN"> tag's required name and value attributes are automatically included in the submitted form's parameter list. These serve to label the form and can be invaluable when sorting out different forms or form versions from a collection of submitted and saved forms.

Another use for hidden fields is to manage user/server interactions. For instance, it helps the server to know that the current form has come form a person who made a similar request a few moments ago. Normally, the server does not retain this information and each transaction between the server and the client is completely independent from all other transactions.

For example, the first form submitted by the user might have asked for some basic demographic information, such as the user's name and where they live. Based upon that initial contact, the server might create a second form asking more specific questions of the user. Since it is tedious of the user to reenter the same basic information from the first form, the server can be programmed to put those values in the second form in hidden fields. When the second form comes back, all the important information from both forms is there, and the second form can be matched to the first form, if necessary.

Hidden fields may also direct the server towards some specific action.

<INPUT TYPE="HIDDEN" NAME="action" VALUE="change">

Therefore, if you have on server-side application that handles the processing of several forms, each form might contain a different action code to help that server application sort things out. For example, the following shows some different examples of using HIDDEN. The following examples will be delineated in more depth in these notes as well as in the Step-by-step notes that follow.


<FORM METHOD="POST" ACTION="formhandler.php">
<input type=hidden name="todo" value="display">
<input type=hidden name="filename" value="xy.txt">
<input type=hidden name="afterpage" value="">
<input type=hidden name="mailto" value="">
<input type=hidden name="mailsubject" value="survey results">
<input type=hidden name="displayformat" value="tabular">
<input type=hidden name="showinfo" value="false">



Processing Forms:

A form requests the server to run a program. Thus, a form is associated with a program on the server. Forms are used to collect data. It does not do any processing of the data. Thus, the only way for one to get a form to do anything useful is to send the data gathered by the form to a program on the server. The program on the server will then take the information gathered by the form from the client and processes it. The server-side, data-processing aspects of forms are not part of the HTML or XHTML standards; they are defined by the server's software.


<FORM=options >

items in list


Creates a simple form. It defines the form.



Following the ACTION element is the URL. For example, <FORM ACTION="cgi_test.cgi"> will display the responses that each client responded to the questions on the form. cgi_test.cgi is a compiled c-program that simply displays the responses. cgi_test.cgi is in the same directory as the form. If not, a more detailed description of the URL would be necessary. The processing program can be written in other languages, for example, PERL, JAVA, Active Server Page (ASP), or PHP. PHP is a widely-used general-purpose scripting language that is especially suited for web development and can be embedded into HTML. If you are interested in learning more about PHP try the following web site: http://www.php.nte/tut.php.

Microsoft adds some other choices such as WEBBOT. The default is to save to file WEBBOT. You can also mail to WEBBOT.

ACTION is the only required attribute. The URL is executed when the form is submitted.

METHOD is either GET or POST. GET tacks all data onto the url when it calls the program. This is the default. It is not generally used. It can sometimes result in your form data being truncated before the program ever receives it. POST is a more reliable delivery method. It is the preferred method.

ENCTYPE is included for completeness. It only has one value: "x-www-form-encoded". This is the default, so it can be ignored until it sprouts more options in future versions of HTML.



Forms Programming:

If you create forms, sooner or later you will need to create the server-side application that processes your form. The most important advice that can be given about forms programming is copy others' work. Writing a forms application from scratch is hard; copying a functioning forms application and modifying it to support your form is far easier. Server vendors know this; and thus, they usually supply sample forms applications with their server. Rummage through a directory named cgi-src, and you should discover a number of useful examples that you can easily copy and reuse. Many times an "echo" program exists on the server. When the "echo" program is called, it returns the field names and values filled out in your form.

The method to choose in most cases is POST. If you are not an expert on forms, then use "POST" unless told to do otherwise.



The following information comes from a program called formhandler.php version 1.0 The Script was written by Bernard Pegis ( on 3/16/02. This script is called by an HTML form using the POST command with this file as the action.


Example: <FORM METHOD="POST" ACTION="formhandler.php">


FormHandler is a configurable PHP script which is used for receiving data from an HTML form and either displaying, emailing or saving the results. When saving the results, a comma delimited file is created on the server with the last two fields being the date and time, respectively, at which the data was entered. After saving or emailing the results, they can be also displayed on the screen to the user. Displayed and emailed results can be shown in either the comma delimited
format or in a more user-friendly format which shows the field name and the data in tabular columns. Descriptions of the options and examples are below. Each option is selected by adding a hidden field to the form with the name of the option. The field's value will be the setting for the option.



Option: todo
Values: writefile, email, display
Use: writefile: create a comma delimited file on the server. The filename is established in the filename option.
email: sends the results of the form to the email address in the mailto option with the subject in the mailsubject option in the format selected by the displayformat option. The originating IP address and script, HTML referring page, and the user's browser type are also emailed.
display: neither writes a file nor emails the results. Only shows the data from the form on the screen in the format selected by the displayformat option.

Example: to write data to a file, add the following field to your form:

<input type=hidden name="todo" value="writefile">


Option: filename
Values: any valid file name
Use: data is written to the file in a comma delimited format. If the filename ends in .php then the data will be more or less obscured from unauthorized viewing. This is accomplished by commenting out the data and causing the PHP parser to ignore the data when the file is requested for viewing. To get the data, you must use the FTP GET command, rather than using HTTP. If the filename ends in anything else, anybody will be able to view the data by simply entering the filename as an HTTP request in a browser. Relative and absolute paths are accepted and used. If no path is included, the file is written in the same directory as the script and form.


<input type=hidden name="filename" value="xy.txt">

or better yet:

<input type=hidden name="filename" value="xy.php">


Option: afterpage
Values: "" or any valid html or php document.
Use: if blank, the script will prompt the user with a generic "thank you" message, otherwise the document indicated will be loaded after the form has been submitted and processed.


<input type=hidden name="afterpage" value="thanks.html">


Option: mailto
Values: any valid email address
Use: This is required if todo is set to "email". This is the address to which the form's results will be emailed. The format selected by the displayformat option will be used.


<input type=hidden name="mailto" value="">


Option: mailsubject
Values: any string value
Use: This is the subject which will be used in the email message which will be sent if todo is set to "email".


<input type=hidden name="mailsubject" value="survey results">


Option: displayformat
Values: comma, tabular
Use: this is the format used when the data is either displayed or emailed. comma will have the data in a comma delimited format and tabular will show the data along with the field names.


<input type=hidden name="displayformat" value="comma">


Option: showinfo
Values: true, false
Use: This option is ignored if todo is set to "display". This causes the form's data to be shown to the user after form submission when todo is set to either "email" or "writefile"


<input type=hidden name="showinfo" value="false">



To contact the author mail him at . Also, his web page is at .

To know more about forms, try the following url:

revision date: March 30, 2002