Advanced Week 3 Step-by-Step Guide

 

Please read the Advanced Web Pages - Week 3 - Notes. Then continue reading the following information below.

 

Masked Input:

<INPUT TYPE="PASSWORD" NAME="string" SIZE=n MAXLENGTH=n VALUE="string">

Is another form of input, but it is masked. In other words, when one types in the requested information, it will not be seen.

The 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">

from last week is replaced by

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

 

The following will provide a text window that will solicit the person's last name, first name, and middle initial. Note that other text precedes the INPUT tag. This helps the person filling out the form to know what the question is rather than seeing only a blank box to fill out. Please open up Notepad on the IBM or SimpleText on the Macintosh and type the following:

 

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY BACKGROUND="/images/marble.gif">

<H1 ALIGN=Center>HTML Programming </H1>
<H2 ALIGN=Center>Forms</H2>

<FORM ACTION="URL" METHOD="post">
Please tell us your <B>name</B>:
<INPUT TYPE="TEXT" SIZE=32 MAXLENGTH=32 NAME="yourname" VALUE="Last, First Middle">

<BR><BR><BR>
Please tell us your <B>name</B>:
<INPUT TYPE="PASSWORD" SIZE=32 MAXLENGTH=32 NAME="yourname2" VALUE="Last, First Middle">
</FORM>

</BODY>
</HTML>

 

This file is saved as forms1.htm.

 

STOP!!! Pause and Allow time to try this out.

 

 

 

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 ACTION="URL" METHOD="method" ENCTYPE="type>

Following the ACTION element is the URL. For example, <FORM ACTION="url"> where url is replaced by some action. The action could mail the results to you, display the results to the screen, or write the results to a file to be processed later. We will look at each of these actions. The processing program can be written in C, PERL, JAVA, Active Server Page (ASP), or PHP. The language depends upon what is present on your server where the form is housed. For our use, we are going to use 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.

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 code will mail the result to the instructor. Please type it in, but replace the instructor's mail address (rolliges@webster.edu) with your own. The instructor receives enough mail already. Thank you. Thr form is the same as from last week, so if you want to copy it from last week and then make the one change, that is acceptable.

 

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY BACKGROUND="/images/marble.gif">

<H1 ALIGN=Center>HTML Programming </H1>
<H2 ALIGN=Center>Forms</H2>

<FORM ACTION="mailto:rolliges@webster.edu" webbot-action="--WEBBOT-SELF--">
Please tell us your <B>name</B>:
<INPUT TYPE="TEXT" SIZE=32 MAXLENGTH=32 NAME="yourname" VALUE="Last, First
Middle">

<H2>What is your favorite <I>sport</I>?</H2>

Please select a <I>sport</I>:
<INPUT TYPE="RADIO" NAME="sport" VALUE="Baseball">Baseball
<INPUT TYPE="RADIO" NAME="sport" VALUE="Football">Football
<INPUT TYPE="RADIO" NAME="sport" VALUE="Soccer">Soccer
<INPUT TYPE="RADIO" NAME="sport" VALUE="Hockey" CHECKED>Hockey

<H2>What is your favorite <I>flower</I>?</H2>

<DL>
Please select a <I>flower</I>:
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Azaela">Azaela</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Tulip">Tulip</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Hyacinth">Hyacinth</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Rose">Rose</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="African Violet">African Violet</DD>
</DL>

<H2>What is your favorite <I>size</I>?</H2>

Please select a size:
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="small">small
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="medium">medium
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="large" CHECKED>large

<H2>What is your favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="color" SIZE="1">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>
<H2>What is your second favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="seccolor" SIZE="2">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>

<H2>Please include any further comments/suggestions?</H2>

<TEXTAREA NAME="comments" ROWS=5 COLS=40></TEXTAREA>
<HR>
<BR><BR>

Click here to reset this form.
<INPUT TYPE="RESET" VALUE="Clear all entries!">
<BR><BR>

Click here to submit this form.
<INPUT TYPE="SUBMIT" VALUE="Send data now">
</FORM>

</BODY>
</HTML>

 


This file is saved as forms2.htm. This assumes that a mail client exists on the server where the form is housed. Please remember that this will only work when the program is on a server that can process it. So for our purposes, you will only be able to type it in and view it unless you have access to a server that you may put the form and the php program in. If you do not have access to a server, then please view it off of the website for the Advanced Web Pages class.

 

STOP!!! Pause and Allow time to try this out.

 

 

 

The results are adequate, but think about how it looks. Do you really want to have these messages coming in and spending more time deciphering them? Could the email be displayed better? Could the results be displayed to the screen? Could the results be written to a file?

 

 

The answer to all of these questions is yes! It simply takes a program that can be processed on the server. Before we get into this, we need to know one more attribute of TYPE. That attribute is HIDDEN.

 

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.

Hidden fields may 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.

 

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

 

The following information comes from a program called formhandler.php version 1.1 The Script was written by Bernard Pegis (bp@amdgsoftware.com) on 4/24/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.


Example:

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

or better yet:

<input type=hidden name="filename" value="formdata.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.


Example:

<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.

Example:

<input type=hidden name="mailto" value="bp@amdgsoftware.com">

 


------------------------------------------


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".


Example:

<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.

Example:

<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"

Example:

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


------------------------------------------

 

To contact the author mail him at bp@amdgsoftware.com . Also, his web page is at http://www.amdgsoftware.com .

 

------------

Sometimes it is easier to have more in the form than what is required. For example, you will see many HIDDEN statements when only a couple of them are actually do the work. They switch off and on depending upon what the VALUE of the TODO is set to. In this example, the TODO has a VALUE of EMAIL. Hence, The following emails the results to me:

 

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY BACKGROUND="/images/marble.gif">

<H1 ALIGN=Center>HTML Programming </H1>
<H2 ALIGN=Center>Forms</H2>

<FORM METHOD="POST" ACTION="formhandler.php">
<input type=hidden name="todo" value="email">
<input type=hidden name="filename" value="formdata.txt">
<input type=hidden name="afterpage" value="">
<input type=hidden name="mailto" value="rolliges@webster.edu">
<input type=hidden name="mailsubject" value="survey results">
<input type=hidden name="displayformat" value="tabular">
<input type=hidden name="showinfo" value="false">


Please tell us your <B>name</B>:
<INPUT TYPE="TEXT" SIZE=32 MAXLENGTH=32 NAME="yourname" VALUE="Last, First
Middle">

<H2>What is your favorite <I>sport</I>?</H2>

Please select a <I>sport</I>:
<INPUT TYPE="RADIO" NAME="sport" VALUE="Baseball">Baseball
<INPUT TYPE="RADIO" NAME="sport" VALUE="Football">Football
<INPUT TYPE="RADIO" NAME="sport" VALUE="Soccer">Soccer
<INPUT TYPE="RADIO" NAME="sport" VALUE="Hockey" CHECKED>Hockey

<H2>What is your favorite <I>flower</I>?</H2>

<DL>
Please select a <I>flower</I>:
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Azaela">Azaela</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Tulip">Tulip</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Hyacinth">Hyacinth</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Rose">Rose</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="African Violet">African Violet</DD>
</DL>

<H2>What is your favorite <I>size</I>?</H2>

Please select a size:
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="small">small
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="medium">medium
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="large" CHECKED>large

<H2>What is your favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="color" SIZE="1">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>
<H2>What is your second favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="seccolor" SIZE="2">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>

<H2>Please include any further comments/suggestions?</H2>

<TEXTAREA NAME="comments" ROWS=5 COLS=40></TEXTAREA>
<HR>
<BR><BR>

Click here to reset this form.
<INPUT TYPE="RESET" VALUE="Clear all entries!">
<BR><BR>

Click here to submit this form.
<INPUT TYPE="SUBMIT" VALUE="Send data now">
</FORM>

</BODY>
</HTML>

 

This file is saved as forms3.htm. Please remember that this will only work when the program is on a server that can process it. So for our purposes, you will only be able to type it in and view it unless you have access to a server that you may put the form and the php program in. If you do not have access to a server, then please view it off of the website for the Advanced Web Pages class.

 

STOP!!! Pause and Allow time to try this out.

 

 

 

Sometimes it is easier to have more in the form than what is required. For example, you will see many HIDDEN statements when only a couple of them are actually do the work. They switch off and on depending upon what the VALUE of the TODO is set to. In this example, the TODO has a VALUE of DISPLAY. Hence, The following displays the results to the screen:

 

 

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY BACKGROUND="/images/marble.gif">

<H1 ALIGN=Center>HTML Programming </H1>
<H2 ALIGN=Center>Forms</H2>

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


Please tell us your <B>name</B>:
<INPUT TYPE="TEXT" SIZE=32 MAXLENGTH=32 NAME="yourname" VALUE="Last, First
Middle">

<H2>What is your favorite <I>sport</I>?</H2>

Please select a <I>sport</I>:
<INPUT TYPE="RADIO" NAME="sport" VALUE="Baseball">Baseball
<INPUT TYPE="RADIO" NAME="sport" VALUE="Football">Football
<INPUT TYPE="RADIO" NAME="sport" VALUE="Soccer">Soccer
<INPUT TYPE="RADIO" NAME="sport" VALUE="Hockey" CHECKED>Hockey

<H2>What is your favorite <I>flower</I>?</H2>

<DL>
Please select a <I>flower</I>:
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Azaela">Azaela</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Tulip">Tulip</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Hyacinth">Hyacinth</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Rose">Rose</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="African Violet">African Violet</DD>
</DL>

<H2>What is your favorite <I>size</I>?</H2>

Please select a size:
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="small">small
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="medium">medium
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="large" CHECKED>large

<H2>What is your favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="color" SIZE="1">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>
<H2>What is your second favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="seccolor" SIZE="2">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>

<H2>Please include any further comments/suggestions?</H2>

<TEXTAREA NAME="comments" ROWS=5 COLS=40></TEXTAREA>
<HR>
<BR><BR>

Click here to reset this form.
<INPUT TYPE="RESET" VALUE="Clear all entries!">
<BR><BR>

Click here to submit this form.
<INPUT TYPE="SUBMIT" VALUE="Send data now">
</FORM>

</BODY>
</HTML>


 

This file is saved as forms4.htm. Please remember that this will only work when the program is on a server that can process it. So for our purposes, you will only be able to type it in and view it unless you have access to a server that you may put the form and the php program in. If you do not have access to a server, then please view it off of the website for the Advanced Web Pages class.

 

STOP!!! Pause and Allow time to try this out.

 

 

Sometimes it is easier to have more in the form than what is required. For example, you will see many HIDDEN statements when only a couple of them are actually do the work. They switch off and on depending upon what the VALUE of the TODO is set to. In this example, the TODO has a VALUE of WRITEFILE. Hence, The following writes the results to a file:

The following wrote the information to a file:

 

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY BACKGROUND="/images/marble.gif">

<H1 ALIGN=Center>HTML Programming </H1>
<H2 ALIGN=Center>Forms</H2>

<FORM METHOD="POST" ACTION="formhandler.php">
<input type=hidden name="todo" value="writefile">
<input type=hidden name="filename" value="formdata.txt">
<input type=hidden name="afterpage" value="">
<input type=hidden name="mailto" value="rolliges@webster.edu">
<input type=hidden name="mailsubject" value="survey results">
<input type=hidden name="displayformat" value="tabular">
<input type=hidden name="showinfo" value="false">


Please tell us your <B>name</B>:
<INPUT TYPE="TEXT" SIZE=32 MAXLENGTH=32 NAME="yourname" VALUE="Last, First
Middle">

<H2>What is your favorite <I>sport</I>?</H2>

Please select a <I>sport</I>:
<INPUT TYPE="RADIO" NAME="sport" VALUE="Baseball">Baseball
<INPUT TYPE="RADIO" NAME="sport" VALUE="Football">Football
<INPUT TYPE="RADIO" NAME="sport" VALUE="Soccer">Soccer
<INPUT TYPE="RADIO" NAME="sport" VALUE="Hockey" CHECKED>Hockey

<H2>What is your favorite <I>flower</I>?</H2>

<DL>
Please select a <I>flower</I>:
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Azaela">Azaela</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Tulip">Tulip</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Hyacinth">Hyacinth</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Rose">Rose</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="African Violet">African Violet</DD>
</DL>

<H2>What is your favorite <I>size</I>?</H2>

Please select a size:
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="small">small
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="medium">medium
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="large" CHECKED>large

<H2>What is your favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="color" SIZE="1">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>
<H2>What is your second favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="seccolor" SIZE="2">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>

<H2>Please include any further comments/suggestions?</H2>

<TEXTAREA NAME="comments" ROWS=5 COLS=40></TEXTAREA>
<HR>
<BR><BR>

Click here to reset this form.
<INPUT TYPE="RESET" VALUE="Clear all entries!">
<BR><BR>

Click here to submit this form.
<INPUT TYPE="SUBMIT" VALUE="Send data now">
</FORM>

</BODY>
</HTML>

 

This file is saved as forms5.htm.

 

 

STOP!!! Pause and Allow time to try this out.

 

 

There is a problem with the previous example. The file that the form's returned information is being written to ends with the extension .txt . Hence, if I know what directory the form is placed in, then I can view the results, eventhough I should not be doing this. To view the results, goto the following url:

 

http://www.webster.edu/~rolliges/EDTC5560_02/Week03/formdata.txt

 

Sometimes it is easier to have more in the form than what is required. For example, you will see many HIDDEN statements when only a couple of them are actually do the work. They switch off and on depending upon what the VALUE of the TODO is set to. In this example, the TODO has a VALUE of WRITEFILE. Hence, The following writes the results to a file, but this time instead of .txt at the end of the file, we have .php . If you try to view the following, you will not see any results, but rather meaningless characters or be turned away:

 

http://www.webster.edu/~rolliges/EDTC5560_02/Week03/formdata.php

 

NOTE: For the program to work correctly and write the file to hold the data, the directory that the file will be stored in needs to have write permission. For those that know Unix a chmod 707 would be one command that will accomplish this.

 

The following correctly wrote the information to a file:

 

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY BACKGROUND="/images/marble.gif">

<H1 ALIGN=Center>HTML Programming </H1>
<H2 ALIGN=Center>Forms</H2>

<FORM METHOD="POST" ACTION="formhandler.php">
<input type=hidden name="todo" value="writefile">
<input type=hidden name="filename" value="formdata.php">
<input type=hidden name="afterpage" value="">
<input type=hidden name="mailto" value="rolliges@webster.edu">
<input type=hidden name="mailsubject" value="survey results">
<input type=hidden name="displayformat" value="tabular">
<input type=hidden name="showinfo" value="false">


Please tell us your <B>name</B>:
<INPUT TYPE="TEXT" SIZE=32 MAXLENGTH=32 NAME="yourname" VALUE="Last, First
Middle">

<H2>What is your favorite <I>sport</I>?</H2>

Please select a <I>sport</I>:
<INPUT TYPE="RADIO" NAME="sport" VALUE="Baseball">Baseball
<INPUT TYPE="RADIO" NAME="sport" VALUE="Football">Football
<INPUT TYPE="RADIO" NAME="sport" VALUE="Soccer">Soccer
<INPUT TYPE="RADIO" NAME="sport" VALUE="Hockey" CHECKED>Hockey

<H2>What is your favorite <I>flower</I>?</H2>

<DL>
Please select a <I>flower</I>:
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Azaela">Azaela</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Tulip">Tulip</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Hyacinth">Hyacinth</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Rose">Rose</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="African Violet">African Violet</DD>
</DL>

<H2>What is your favorite <I>size</I>?</H2>

Please select a size:
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="small">small
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="medium">medium
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="large" CHECKED>large

<H2>What is your favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="color" SIZE="1">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>
<H2>What is your second favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="seccolor" SIZE="2">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>

<H2>Please include any further comments/suggestions?</H2>

<TEXTAREA NAME="comments" ROWS=5 COLS=40></TEXTAREA>
<HR>
<BR><BR>

Click here to reset this form.
<INPUT TYPE="RESET" VALUE="Clear all entries!">

 

<BR><BR>

Click here to submit this form.
<INPUT TYPE="SUBMIT" VALUE="Send data now">
</FORM>

</BODY>
</HTML>

 

This file is saved as forms6.htm. Please remember that this will only work when the program is on a server that can process it. So for our purposes, you will only be able to type it in and view it unless you have access to a server that you may put the form and the php program in. If you do not have access to a server, then please view it off of the website for the Advanced Web Pages class.

 

STOP!!! Pause and Allow time to try this out.

 

 

If you choose to use the email feature with your own thank you page and display, then the information will be emailed to your account, the screen will flash for a moment with the display of your sent information and then quickly your thank you page will be displayed. The following code illustrates this:

 

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY BACKGROUND="/images/marble.gif">

<H1 ALIGN=Center>HTML Programming </H1>
<H2 ALIGN=Center>Forms - Emails, Displays, and Thank you page</H2>

<FORM METHOD="POST" ACTION="formhandler.php">
<input type=hidden name="todo" value="email">
<input type=hidden name="filename" value="formdata.php">
<input type=hidden name="afterpage" value="thanks.htm">
<input type=hidden name="mailto" value="rolliges@webster.edu">
<input type=hidden name="mailsubject" value="survey results">
<input type=hidden name="displayformat" value="tabular">
<input type=hidden name="showinfo" value="true">


Please tell us your <B>name</B>:
<INPUT TYPE="TEXT" SIZE=32 MAXLENGTH=32 NAME="yourname" VALUE="Last, First
Middle">

<H2>What is your favorite <I>sport</I>?</H2>

Please select a <I>sport</I>:
<INPUT TYPE="RADIO" NAME="sport" VALUE="Baseball">Baseball
<INPUT TYPE="RADIO" NAME="sport" VALUE="Football">Football
<INPUT TYPE="RADIO" NAME="sport" VALUE="Soccer">Soccer
<INPUT TYPE="RADIO" NAME="sport" VALUE="Hockey" CHECKED>Hockey

<H2>What is your favorite <I>flower</I>?</H2>

<DL>
Please select a <I>flower</I>:
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Azaela">Azaela</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Tulip">Tulip</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Hyacinth">Hyacinth</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="Rose">Rose</DD>
<DD><INPUT TYPE="RADIO" NAME="flower" VALUE="African Violet">African Violet</DD>
</DL>

<H2>What is your favorite <I>size</I>?</H2>

Please select a size:
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="small">small
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="medium">medium
<INPUT TYPE="CHECKBOX" NAME="size" VALUE="large" CHECKED>large

<H2>What is your favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="color" SIZE="1">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>
<H2>What is your second favorite <I>color</I>?</H2>

Please select a color:<SELECT NAME="seccolor" SIZE="2">
<OPTION SELECTED>blue
<OPTION>red
<OPTION>green
<OPTION>yellow
<OPTION>pink
<OPTION>orange</SELECT>

<H2>Please include any further comments/suggestions?</H2>

<TEXTAREA NAME="comments" ROWS=5 COLS=40></TEXTAREA>
<HR>
<BR><BR>

Click here to reset this form.
<INPUT TYPE="RESET" VALUE="Clear all entries!">


<BR><BR>

Click here to submit this form.
<INPUT TYPE="SUBMIT" VALUE="Send data now">
</FORM>

</BODY>
</HTML>

 

 

This file is saved as forms7.htm. Please remember that this will only work when the program is on a server that can process it. So for our purposes, you will only be able to type it in and view it unless you have access to a server that you may put the form and the php program in. If you do not have access to a server, then please view it off of the website for the Advanced Web Pages class. It will email the information from the form as well as display it in a window. When you click on the link that indicates you are done viewing it, the thank you page will appear.

 

The following is the thank you page code, for example:

<html>
<head>
<title>Personal thank you page</title>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div align="center">
<p><font size="7">Thank You Page</font></p>
<p>&nbsp;</p>
<p><font size="6">Dr Ralph Olliges' Personal thank you page.</font></p>
<p>&nbsp;</p>
<p><font size="5">Thank you for trying out this form.</font></p>
<p>&nbsp;</p>
</div>
</body>
</html>

 

This code is saved as thanks.htm. It works in conjunction with forms7.htm.

 

STOP!!! Pause and Allow time to try this out.