Project Four Forms Discuss form processing Describe the difference between client-side and server-side form processing Add a horizontal rule to a Web page.

Project FourForms

•Discuss form processing•Describe the difference between client-side and server-side form processing•Add a horizontal rule to a Web page•Create a form•Discuss form design•Insert a table into a form•Describe form objects•Describe and add text fields and text areas to a form•Describe and add check boxes and radio buttons to a form•Describe and add lists and menus to a form•Describe and add form buttons to a form•Describe form accessibility options•Apply behaviors to a form•View and test a form

Test ResultsA – 2B – 1C – 2D – 0F – 0

Not Taken – 0

Two versions – Server Side and Client SideRequires 2 separate pages…

Only the Client Side Version of this page

Overview• We will create 4 new pages containing

forms, tables, and form objects.

• Learn the use of text fields, radio buttons, checkboxes, list and pop-up menus, jump menus, submit and reset buttons.

• Learn how to use Behaviors to validate a form.

• Live through a painful set of examples on the use of client side forms and server side forms. :-)

What is a Form?

• Forms provide a way for a user to interact with a web site.

• Provide a way to gather information from a user.

• Allow a user to submit feedback

• Allow a shopper to place an order for some sort of merchandise.

Form Processing• Forms do not process data they only

collect it.

• Processing must be done using a script.– Client Side – The script is on the client

machine (Possible problems?)– Server Side – The script lives on the server.

• Perl, VBScript, JavaScript, Java, or C++ are all examples of server side scripts

• Cold Fusion, ASP, ASP.NET, PHP, and Java Server are server side technologies.

Common Gateway Interface

• Also known as CGI

• Lives on the web server in the CGI-BIN folder.

• Script name is FormMail.pl

• Written in Perl

• Source code and ReadMe is available from the Reading Link on the class page

CGI Continued• The FormMail script will take the data

gathered in the browser and format it into an email message doing only minor validation of the data.

• The script will then email the data to the address in the hidden field recipient…

• Finally the script will redirect the user to a thank you page or another page. Why is this a good idea?

The FORM Tag

• Syntax <form>…</form>

• Parameters– Action – Path to the script– Method – get and post

• get sends the data in the URL, very limited• post sends the date very efficiently and is not as

limited as the get method

• Forms are displayed in Dreamweaver as a dotted red outline.

Windows XP SP2

• From now on the browser will hassle us about everything we do.

• This is a security feature and is really a good thing.

• IE6, IE7, Fire fox• Be sure to allow blocked content when

testing.• Great way to learn new and colorful words.• http://scsite.com/dw8/more.htm

More on Forms

Example Server Side Form

The Name and the Email Field must be named realname and email

Don’t confuse the field label with the name of the form object… They are often named the same…

The Mission• Build two versions of the Hotel Reservation

Form, Client and Server.• Label each page Client Side or Server Side right

below the horizontal rule and just above the form on each page.

• When your server side form is submitted the form page should be replaced by a page thanking the user for filling out the form.

• The Thank you page should be displayed for 15 seconds and then return the user to the page they came from.

Stuff You Will Need!

• Form Action:– http://chinook.kpc.alaska.edu/cgi-bin/FormMail.pl

• Hidden Fields– field_order – the order the information appears in the

body of the email– redirect – Full URL of a page to take the user when

submit is pressed– subject – Subject line for email sent– recipient – Your UAA email address

Don’t freak out!!!There's more!!!

<form action="http://chinook.kpc.alaska.edu/cgi-bin/FormMail.pl" method="post" name="MyForm“>

<input type="text" name="realname" size="50" maxlength="50">

<input type="text" name="email" size="50" maxlength="50">

<input type="checkbox" name="Enjoyed" value="Enjoyed the page!">

<input type="checkbox" name="GoodColor" value="Good Color">

<div align="center"> <input type="radio" name="sexbutton" value="Male"> <font face="Verdana, Arial, Helvetica, sans-serif">Male</font> <input type="radio" name="sexbutton" value="female"> <font face="Verdana, Arial, Helvetica, sans-serif">Female </font> <input type="radio" name="sexbutton" value="Other">Other </font> <input type="radio" name="sexbutton" value="Unknown">Don't Know</font></div>

<textarea name="comments" rows="5" cols="50"></textarea>

<input type="hidden" name="field_order" value="realname,email,Enjoyed,GoodColor,sexbutton,comments"><input type="hidden" name="redirect" value="http://chinook.kpc.alaska.edu/~inmej/thanks.htm"><input type="hidden" name="subject" value="Email Survey Form"><input name="recipient" type="hidden" id="recipient" value="[email protected]">

The Thank-You Page

Click the Horizontal Rule text box and type horz_rule.

Click the W (Width) text box and type 500.

Tab to the H (Height) text box and type 10.

Click the Shading check box to deselect it.

Forms and Objects in Them

Forms are NOT Tables

• Forms can not be nested

• Forms can not be resized, they size themselves as objects are added.

• The form object is invisible when viewed in the browser.

• You can not display a forms borders.

Form Name: Allows you to reference the form from a scripting language

Action: Defines how the form will be processed

Target: Specifies a window or FRAME in which to display data after the form is processed.

_blank – opens a new window_self – replaces contents of current windowThese may not work for forms and jump menus as described.

Method – How the form data is transferred to the server (post or get)

Enctype – MIME (Multipurpose Internet Mail Extensions) We will use text/plain forour mailto forms and nothing for the server side form…

Leave the Action field blank at this time

Leave the Enctype blank at this time

TextField – Assigns a unique name to the form object