COS 125

1
COS 125

• DAY 26

2
Agenda

• Assignment 7 Graded
• 10 As, 4 Bs, and 1 non-submit
• Assignment 8 Due April 27
• Assignment 9 will be assigned in WebCT by
  Tuesday
• Last one!!!!
• Due May 4, 8AM
• Exam 5 is April 30
• Castro Chap13, 14, 15 16
• 25 M/C questions, WebCT
• 50 min
• Capstones Projects
• Everything due MAY 4 8AM
• Presentations at that time also
• Website for text book
• http//www.cookwood.com/html5ed/
• Website for examples
• http//perleybrook.umfk.maine.edu/samples/sample.h
  tm
• Lecture/Discuss Forms

3
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 forms accessibility
• Understand how to disable form elements
• Understand how to display form contents in a way
  that cannot be changed

4
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 whos visiting you
• Sell stuff
• And much more!

5
Form example
6
Form Example
7
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

8
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

9
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

10
Getting a Script

• First ok use of scripts with 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

11
Creating A Form

• A form has 3 important parts
• The form ltformgt lt/formgt
• The script that process the form
• The form elements
• Text boxes
• Buttons
• Menus
• Example
• ltform methodpost actionscript.url gt
• lttextarea namestuff rows1
  cols65gtStufflt/textareagt
• ltinput typesubmit valuesend stuff
  namesubmit/gt
• lt/formgt

12
Sending From Data via E-mail

• If you dont want to use scripts you can have
  form data sent to you via e-mail
• ltform methodpost enctypetext/plain
  actionsmailtome_at_there.com gt
• form elements
• lt/formgt

13
Form example
14
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

15
(No Transcript)
16
Creating text boxes

• Text boxes contain one line of free-form text
• Provide prompt to the users
• Type your comments in the area provided.
• ltinput typetext nameaName valuevalue
  sizen maxlengthn /gt
• 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 lt maxlenght

17
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
• ltinput typepassword nameaName sizen
  maxlengthn /gt

18
(No Transcript)
19
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.
• ltinput typeradio nameaName valueChoiceA
  /gtChoice A
• ltinput typeradio nameaName valueChoiceB
  /gtChoice B
• ltinput typeradio nameaName valueChoiceC
  checkedchecked/gtChoice C

20
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.
• ltinput typecheckbox nameaName
  valueChoiceA /gtChoice A
• ltinput typecheckbox nameaName
  valueChoiceB /gtChoice B
• ltinput typecheckbox nameaName
  valueChoiceC checkedchecked/gtChoice C

21
Creating Drop Down Menus
22
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.
• ltselect nameaName sizen multiplemultiple
  gt
• ltoption valuemenu1gtMenu 1lt/optiongt
• ltoption valuemenu2gtMenu 2lt/optiongt
• ltoption valuemenu3 selectedselectedgtMenu
  3lt/optiongt
• lt/selectgt

23
To Create Grouped menus

• Create a menu as described on previous slide
• Before the 1st option tag in the 1st group
• ltoptgroup labelsubMenugt
• ltoption gt lt/optiongt
• After the last option you wish to group
• lt/optgroupgt

24
Creating a Larger Text Area

• Gives user more room to write than text box
• Prompt the user
• Enter comments here
• lttextarea nameaName rowsn colsngt Default
  Text lt/textareagt
• Can accepted up to 32,700 characters
• Scroll bars appear when user types in more text
  than visible area

25
Allowing a user to Upload Files
26
Allowing a user to Upload Files

• Requires a special CGI script
• ltform method"post" enctype"multipart/form-data"
  actionupload.cgi"gt
• lth2gtWhat files are you sending?lt/h2gt ltinput
  type"file" name"uploadfile" size"40"/gt
• ltinput type"submit" name"submit"/gt
• lt/formgt

27
Hidden Fields

• The data is embedded in form and users doesnt
  see and cant modify
• ltinput typehidden nameaName valuevalue
  /gt
• Must give a value
• Data will be passed to script

28
Creating the Submit Button

• When depressed will send all name value pairs to
  script
• ltinput typesubmit valuesubmit text /gt
• The text given for value will appear on the
  button
• You can use many submit buttons if you name them
• ltinput typesubmit name button1 valuesubmit
  now /gt
• ltinput typesubmit namebutton2 valuesubmit
  again /gt
• You can add an image to a submit (or any other)
  button
• ltbutton typesubmit namesubmit
  valuesubmitgt
• ltimg srcimage.gif /gt
• lt/buttongt
• You can use CSS to style buttons

29
Resetting the Form

• Resetting will cause all entered data on the form
  to be reset
• ltinput typereset valuereset text /gt
• You can add an image to a reset (or any other)
  button
• ltbutton typereset namereset valueresetgt
• ltimg srcimage.gif /gt
• lt/buttongt

30
(No Transcript)
31
Using an Image to Submit Data

• Create a GIF or JPEG image
• ltinput typeimage srcimage.gif namecord
  altpicturename /gt
• Position of cursor when mouse is clicked will be
  relayed to script as
• Coord.x
• Coord.y

32
Using an Image to Submit Data
33
Organizing The Form elements

• You can some group elements in your form
• After ltform gt but before the first element you
  wish to group
• ltfieldsetgt
• ltlegend alignleft or rightgt Name of
  Groupinglt/legendgt
• After the elements you wished to group
• lt/fieldsetgt

34
Fieldsets
35
Other form attributes

• Labels
• ltlabel foraNamegtLabel textlt/labelgt
• Will place Label text before the form element
  with idaName
• Can be formatted with CSS
• Setting tab orders
• tabindexN in element opening tag
• Adding keyboard shortcuts
• acesskey B in element opening tag
• Disabling an element
• Disableddisabled
• Prevent a element from being modified
• Readonlyreadonly