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

2. Test Results A – 2 B – 1 C – 2 D – 0 F – 0 Not Taken – 0

3. Two versions – Server Side and Client Side Requires 2 separate pages…

4. Only the Client Side Version of this page

5. 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. :-)

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

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

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

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

10. The FORM Tag Syntax … 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.

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

12. More on Forms

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

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

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

18. Male Female Other Don't Know

19. The Thank-You Page

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

24. Forms and Objects in Them

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

28. 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 window These 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 for our mailto forms and nothing for the server side form…

30. Leave the Action field blank at this time

31. Leave the Enctype blank at this time

38. TextField – Assigns a unique name to the form object