1 / 42

COS 125

COS 125. DAY 25. Agenda. Assignment #7 Graded 2 A’s, 3 B’s, 2 C’s, 1 D, 2 F’s (late) and 5 non-submit Assignment # 8 Due Today Assignment #9 is posted Last one!!!! Due May 2, 3:35 PM Exam #5 is April 29 Castro Chap13, 14, 15 & 16 25 M/C questions, WebCT 60 min Capstones Projects

matana
Download Presentation

COS 125

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. COS 125 DAY 25

  2. Agenda • Assignment #7 Graded • 2 A’s, 3 B’s, 2 C’s, 1 D, 2 F’s (late) and 5 non-submit • Assignment # 8 Due Today • Assignment #9 is posted • Last one!!!! • Due May 2, 3:35 PM • Exam #5 is April 29 • Castro Chap13, 14, 15 & 16 • 25 M/C questions, WebCT • 60 min • Capstones Projects • Everything is due MAY 5 at 5PM • Presentations on May 2 and 5 • Website for text book • http://www.cookwood.com/html5ed/ • Website for examples • http://perleybrook.umfk.maine.edu/samples/forms.htm • Lecture/Discuss Forms

  3. Re-Scheduling of Capstone Presentations • May 2 • Steve • Joshua • Doug • Heather • May 5 • Sam • Josee • Trokon • Paul • Kristin • Billy • Brandon

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

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

  6. Form example

  7. Form Example

  8. What is a form? • Two basic parts • Structure or shell • Fields • Labels • Buttons • Graphic User Interface components • Scripts to process information collected • CGI • JavaScript • ASP

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

  10. What do Scripts do • Elements in forms • Collect data • Name Values pairs • Display data • Name values • Perform actions • Buttons • Scripts • Do something with data collected • Format data for display • Add functionality to action elements

  11. Getting a Script • First ok use of scripts with the web server administrator • Search web for free (or near free scripts) • www.cpan.org • www.cgi-resources.com • www.extropia.com • www.awsd.com/scripts

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

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

  14. Form example

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

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

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

  18. 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” size=“n” maxlength=“n” />

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

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

  21. Creating Drop Down Menus

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

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

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

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

  26. Allowing a user to Upload Files

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

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

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

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

  31. Using an Image to Submit Data

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

  33. Fieldsets

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

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

  36. Assignment #9 • 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

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

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

  39. Assignment #9

More Related