View
219
Download
0
Embed Size (px)
Citation preview
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 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
Re-Scheduling of Capstone Presentations
May 2 Steve Joshua Doug Heather
May 5 Sam Josee Trokon Paul Kristin Billy Brandon
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
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!
Form example
Form Example
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
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
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
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
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>
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:[email protected] >
… form elements…
</form>
Form example
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
http://www.response-o-matic.com/
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
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” />
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
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
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>
Fieldsets
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”
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 #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
Assignment #9If you get this after submitting your form, than your form is either incorrect Or the user did not use the form correctly
Assignment #9
If you get this after submitting your form, than your form is working correctly
Assignment #9