1. COS 125 DAY 17

2. Agenda  Assignment 7 not finished grading  Assignment 8 posted Due April 9  Capstone progress reports due  Quiz 2 Corrected 2 A’s, 3 B’s, 2 C’s, 2 D’s, and 1 F  New course time line  Discussion on Forms

3. New time line  April 2  Forms part1  Progress report 6  Forms part 2 9  Assignment 8 due  Multimedia 13  Scripts Part 1 16  Assignment 9 due  Scripts part 2 20  PodCasting  Progress report 23  Assignment 10 due  Quiz 3 27  Capstones & Presentations Due

4. Assignment 8

5. Learning Objectives  What are forms??  Understand how to create an xHTML form  Understand that most forms require a CGI script  Understand how to submit a form by e-mail without a CGI script  Be aware of form hosting services as a alternative way to process forms  Use form fieldset elements  Use form label elements  Use tabindex and accesskey attributes to improves a form’s accessibility  Understand how to disable form elements  Understand how to display form contents in a way that cannot be changed  Examples: http://www.cookwood.com/html6ed/examples/#c17 http://www.cookwood.com/html6ed/examples/#c17

6. What is a form??  A form is a way to actively collect or display information to or from a web site viewer  What can you do with forms? Get feedback Have a guestbook Take a survey See who’s visiting you Sell stuff And much more!

7. Form example

8. Form Example

10. What is a form?  Two basic parts Structure or shell  Fields  Labels  Buttons  Graphic User Interface components  GUI pronounced “gooey” Scripts to process information collected  CGI  JavaScript  ASP  PHP

11. About CGI Scripts  A script is a program written in a scripting language Perl VBscript JavaScript PHP  Script runs on Web Server through a Interface Requires Web Server administrator Common Gateway Interface ASP engine JavaScript interpreter

12. What do Scripts do  Processes the elements in forms Collect data  Name  Values pairs  City=Fort%20Kent Display data  Name values Perform actions  Buttons  Scripts Do something with data collected Format data for display Add functionality to action elements

13. Creating A Form  A form has 3 important parts The form The script that process the form The form elements  Text boxes  Buttons  Menus  Basic Example Stuff

14. example  http://www.cookwood. com/html6ed/example s/forms/fullform.html http://www.cookwood. com/html6ed/example s/forms/fullform.html  More examples http://www.cookwood.c om/html6ed/examples/f orms/ http://www.cookwood.c om/html6ed/examples/f orms/

15. Sending From Data via E-mail  If you don’t want to use scripts you can have form data sent to you via e-mail mailto:me@there.com … form elements… http://perleybrook.umfk.maine.edu/classes/cos125 /HTML6ed_examples/forms/fullform_email.html

17. Form example DEFAULT ACTION http://www.cookwood.com/cgi-bin/display_results.pl

18. Testing Forms (without a Script)  Send e-mail to yourseslf  Use a “display” script Action="http://www.cookwood.com/cgi- bin/display_results.pl" Action=“http://www.cookwood.com/html6ed/ex amples/forms/showform.php”

20. Using a Form Hosting Service  An option to creating scripts is using a form hosting service  Steps Find a hosting service Connect to hosting service Read the site info Follow their instructions

21. http://www.response-o-matic.com/

22. Organizing The Form elements  You can some group elements in your form  After but before the first element you wish to group Name of Grouping  After the elements you wished to group

23. Fieldsets, legends CSS and IE7  http://www.cookwood.com/html6ed/exam ples/forms/fieldsetlegend.html http://www.cookwood.com/html6ed/exam ples/forms/fieldsetlegend.html fieldset.css Doesn’t work in IE  http://www.cookwood.com/html6ed/exam ples/forms/plegend.html http://www.cookwood.com/html6ed/exam ples/forms/plegend.html plegend.txt Does Works in IE

24. Fieldsets

25. In Opera

26. Creating text boxes  Text boxes contain one line of free-form text  Provide prompt to the users “Type your comments in the area provided.”  Value is default text that will appear in text box Size is the display area in number of characters Maxlength is maximum number of characters the text box will accept  Usually size < maxlenght

28. Creating Password box  The difference between a text box and a password box is that the user will not see what they are typing. The characters are replaced with **  Give the user a prompt Enter password: While the “password” cannot be seen in the form it can be seen in the network stream

30. Creating Labels for Form elements  Some label name Form element must have an ID If you do not use “for” then label is associated with “nearest” form element Use CSS to format labels

32. Creating Radio Buttons  Radio Buttons allow you to select only one possible response from a list  The following creates a list of 3 choices with the third choice already selected.  Name must be the same for all radio buttons in the same group Choice A Choice B Choice C

34. Creating Checkboxes  Checkboxes allow you to select as many responses as you like from a list  The following creates a list of 3 choices with the third choice already selected.  Name must be the same for all checkboxes in the same group Choice A Choice B Choice C

35. Creating Drop Down Menus

36.  Prompt the user “Select one of the list:”  The following creates a drop down of N lines with 3 choices. Menu 3 is preselected. Menu 1 Menu 2 Menu 3

37. To Create Grouped menus  Create a menu as described on previous slide  Before the 1 st option tag in the 1 st group … After the last option you wish to group

39. Creating a Larger Text Area  Gives user more room to write than text box  Prompt the user “Enter comments here:”  Default Text Can accepted up to 32,700 characters Scroll bars appear when user types in more text than visible area

41. Allowing a user to Upload Files  Requires a special CGI script What files are you sending?

42. Allowing a user to Upload Files http://perleybrook.umfk.maine.edu/samples/forms/upload.html

43. Hidden Fields  The data is embedded in form and users doesn’t see and can’t modify   Must give a value  Data will be passed to script

44. Creating the Submit Button  When depressed will send all name value pairs to script  The text given for value will appear on the button  You can use many submit buttons if you name them  You can add an image to a submit (or any other) button  You can use CSS to style buttons

45. Resetting the Form  Resetting will cause all entered data on the form to be reset   You can add an image to a reset (or any other) button

47. Using an Image to Submit Data  Create a GIF or JPEG image   Position of cursor when mouse is clicked will be relayed to script as Coord.x Coord.y

48. Using an Image to Submit Data

49. Other form attributes  Labels Label text Will place “Label text” before the form element with id=“aName” Can be formatted with CSS  Setting tab orders tabindex=“N” in element opening tag  Adding keyboard shortcuts acesskey = “B” in element opening tag  Disabling an element Disabled=“disabled”  Prevent a element from being modified Readonly=“readonly”

50. Capstone Update  Place your capstone project files in the capstone directory on the ftp server  Call the start page of your website “main.htm” and place in the capstone directory  Place your PowerPoint Presentation in this same directory  You will be able get to capstone through the menu

52. Assignment # 8  Create a Guest Book  Students Create the input form Collect the following info  Name  E-mail  Age  Status  Favorite URL  Comments  Instructor wrote the ASP Scripts that create the guest book  The script will give you errors if your form isn’t correct

53. Assignment #8 If you get this after submitting your form, than your form is either incorrect Or the user did not use the form correctly

54. Assignment #8 If you get this after submitting your form, than your form is working correctly

55. Assignment #8