1. COS 125
DAY 18

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

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

4. Creating Drop Down Menus

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

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

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

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

11. Allowing a user to Upload Files

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

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

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

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

17. Using an Image to Submit Data

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

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

21. Assignment # 8 Create a Guest Book Students Create the input form
Collect the following info
Name
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

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

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

24. Assignment #8