COS 125

DAY 23

Agenda Assignment 6 Corrected

5 A’s, 1 B, 1 C and 1 D Problems with using CSS for layouts

Assignment 7 is due today Assignment 8 (last one) is posted

Due May 2 Left to do

3rd and final Capstone progress report due April 25 1 Quiz on May 2

Chaps 7 17, Skip Chap 13 20 M/C, 4 Short essays

Capstone projects on May 6 @ 3 PM Course Evaluations Lecture/Discuss Forms

Examples http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/localindex.html#c17

http://www.cookwood.com/html6ed/examples/#c17

Assignment 8

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

Form Example

What is a form?

Two basic parts Structure or shell

Fields Labels Buttons Graphic User Interface components

GUI pronounced “gooey” Scripts to process information collected

CGI JavaScript ASP PHP

About CGI Scripts

A script is a program written in a scripting language Perl VBscript JavaScript PHP

Script runs on Web Server through a Interface Requires Web Server administrator Common Gateway Interface ASP engine JavaScript interpreter

What do Scripts do

Processes the elements in forms Collect data

Name Values pairs City=Fort%20Kent

Display data Name values

Perform actions Buttons

Scripts Do something with data collected Format data for display Add functionality to action elements

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

Basic 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>

example

http://www.cookwood.com/html6ed/examples/forms/fullform.html

More examples http://

www.cookwood.com/html6ed/examples/forms/

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>http://perleybrook.umfk.maine.edu/classes/cos125/

HTML6ed_examples/forms/fullform_email.html

Form example

DEFAULT ACTION http://www.cookwood.com/cgi-bin/display_results.pl

Testing Forms (without Script)

Send e-mail to yourseslf Use a “display” script

Action="http://www.cookwood.com/cgi-bin/display_results.pl"

Action=“http://www.cookwood.com/html6ed/examples/forms/showform.php”

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/

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, legends CSS and IE7

http://www.cookwood.com/html6ed/examples/forms/fieldsetlegend.html fieldset.css

http://www.cookwood.com/html6ed/examples/forms/plegend.html plegend.txt

Works well in Opora

Fieldsets

In Opera

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

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”

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