1. COS 125 DAY 24

2. Agenda Assignment 7 is due today Assignment 7 Assignment 8 (last one) is posted  Due May 2 Left to do  3 rd and final Capstone progress report due  1 Quiz on May 2 Chaps 7  17, Skip Chap 13 20 M/C, 4 Short essays  Capstone projects on May 6 @ 3 PM Lecture/Discuss Forms  Examples http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/localindex.html#c 17 http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/localindex.html#c 17  http://www.cookwood.com/html6ed/examples/#c17 http://www.cookwood.com/html6ed/examples/#c17

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

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

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

8. Creating Drop Down Menus

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

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

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

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

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

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

17. 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 http://www.cookwood.com/html6ed/examples/forms/submit.html #buttons input {background:#DED983;font:1.2em "Trebuchet MS", Verdana, sans-serif} #buttons {text-align:center}

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

19. http://www.cookwood.com/html6ed/examples/forms/buttonreset.html

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

21. Using an Image to Submit Data http://www.cookwood.com/html6ed/examples/forms/zonemap.html

22. Other form attributes Setting tab orders  tabindex=“N” in element opening tag  http://www.cookwood.com/html6ed/examples/forms/taborder.html http://www.cookwood.com/html6ed/examples/forms/taborder.html Adding keyboard shortcuts  acesskey = “B” in element opening tag  http://www.cookwood.com/html6ed/examples/forms/keyboard.html http://www.cookwood.com/html6ed/examples/forms/keyboard.html Disabling an element  Disabled=“disabled”  http://www.cookwood.com/html6ed/examples/forms/disabled.html http://www.cookwood.com/html6ed/examples/forms/disabled.html Prevent a element from being modified  Readonly=“readonly”  http://www.cookwood.com/html6ed/examples/forms/readonly.html http://www.cookwood.com/html6ed/examples/forms/readonly.html

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

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

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

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

28. Assignment #8