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

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

9. 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 <form> </form> • The script that process the form • The form elements • Text boxes • Buttons • Menus • Basic Example <form method=“post” action=“script.url” > <textarea name=“stuff” rows=“1” cols=“65”>Stuff</textarea> <input type=“submit” value=“send stuff” name=“submit”/> </form>

14. example • http://www.cookwood.com/html6ed/examples/forms/fullform.html • More examples • http://www.cookwood.com/html6ed/examples/forms/

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 <form method=“post” enctype=“text/plain” actions=mailto:me@there.com > … form elements… </form> 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/examples/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 <form …> but before the first element you wish to group <fieldset> <legend align=“left or right”> Name of Grouping</legend> • After the elements you wished to group </fieldset>

23. Fieldsets, legends CSS and IE7 • http://www.cookwood.com/html6ed/examples/forms/fieldsetlegend.html • fieldset.css • Doesn’t work in IE • http://www.cookwood.com/html6ed/examples/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.” • <input type=“text” name=“aName” id=“anID” value=“value” size=“n” maxlength=“n” /> • 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: <input type=“password” name=“aName” id=“anID” size=“n” maxlength=“n” /> While the “password” cannot be seen in the form it can be seen in the network stream

30. Creating Labels for Form elements • <label for=“idName”> Some label name </label> • 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 <input type=“radio” name=“aName” value=“ChoiceA” />Choice A <input type=“radio” name=“aName” value=“ChoiceB” />Choice B <input type=“radio” name=“aName” value=“ChoiceC” checked=“checked”/>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 <input type=“checkbox” name=“aName” value=“ChoiceA” />Choice A <input type=“checkbox” name=“aName” value=“ChoiceB” />Choice B <input type=“checkbox” name=“aName” value=“ChoiceC” checked=“checked”/>Choice C

35. Creating Drop Down Menus

36. Creating Drop Down Menus • Prompt the user • “Select one of the list:” • The following creates a drop down of N lines with 3 choices. Menu 3 is preselected. <select name=“aName” size=“n” multiple=“multiple” > <option value=“menu1>Menu 1</option> <option value=“menu2>Menu 2</option> <option value=“menu3 selected=“selected”>Menu 3</option> </select>

37. To Create Grouped menus • Create a menu as described on previous slide • Before the 1st option tag in the 1st group <optgroup label=“subMenu”> <option …> …</option> After the last option you wish to group </optgroup>

39. Creating a Larger Text Area • Gives user more room to write than text box • Prompt the user • “Enter comments here:” • <textarea name=“aName” rows=“n” cols=“n”> Default Text </textarea> • 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 <form method="post" enctype="multipart/form-data" action=“upload.cgi"> <h2>What files are you sending?</h2> <input type="file" name="uploadfile" size="40"/> <input type="submit" name="submit"/> </form>

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 • <input type=“hidden” name=“aName” value=“value” /> • 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 • <input type=“submit” value=“submit text” /> • The text given for value will appear on the button • You can use many submit buttons if you name them <input type=“submit” name= button1” value=“submit now” /> <input type=“submit” name=button2” value=“submit again” /> • You can add an image to a submit (or any other) button <button type=“submit” name=“submit” value=submit”> <img src=“image.gif” /> </button> • You can use CSS to style buttons

45. Resetting the Form • Resetting will cause all entered data on the form to be reset • <input type=“reset” value=“reset text” /> • You can add an image to a reset (or any other) button <button type=“reset” name=“reset” value=reset”> <img src=“image.gif” /> </button>

47. Using an Image to Submit Data • Create a GIF or JPEG image • <input type=“image” src=“image.gif” name=“coord” alt=“picturename” /> • 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 for=“aName”>Label text</label> • 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