COS 125 DAY 24. Agenda Assignment 7 is due today Assignment 7 Assignment 8 (last one) is posted Due...
-
Upload
martin-lawrence -
Category
Documents
-
view
217 -
download
2
Transcript of COS 125 DAY 24. Agenda Assignment 7 is due today Assignment 7 Assignment 8 (last one) is posted Due...
COS 125
DAY 24
Agenda Assignment 7 is due today Assignment 8 (last one) is posted
Due May 2
Left to do 3rd 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#c17
http://www.cookwood.com/html6ed/examples/#c17
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
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
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
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 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}
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>
http://www.cookwood.com/html6ed/examples/forms/buttonreset.html
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
http://www.cookwood.com/html6ed/examples/forms/zonemap.html
Other form attributes
Setting tab orders tabindex=“N” in element opening tag 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
Disabling an element Disabled=“disabled” 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
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
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 #8If you get this after submitting your form, than your form is either incorrect Or the user did not use the form correctly
Assignment #8
If you get this display after submitting your form, than your form is working correctly
Assignment #8