COS 125 DAY 18

Agenda New course time line Finish Discussion on Forms Assignment 7 graded 4 A’S, 3 B’S, 1 C and 2 F’S Assignment 8 posted Due April 9 Assignment 8 will be posted later this week Due April 16 New course time line Finish Discussion on Forms More form examples http://perleybrook.umfk.maine.edu/samples/forms.htm

New time line April 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

Creating Drop Down Menus

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>

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>

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

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>

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

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

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

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>

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

Using an Image to Submit Data

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” http://www.cookwood.com/html6ed/examples/forms/disabled.html

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 your capstone through the menu

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

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 (did not provide data)

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

Assignment #8