ECT270 Clientside Web Application Development

1
ECT270 Client-side Web Application Development

• Forms in HTML
• Second part of lecture in the ECT lab on the 7th
  floor of ECT building!

2
(No Transcript)
3
How do forms work?

• Forms are used on the Web to collect information
  from users
• The information is then sent to a program running
  on the Web server called CGI script (Common
  Gateway Interface)
• The CGI script receives the data from the Web
  page, then acts on that data to perform a certain
  task

Forms.htm
4
Forms/CGI script interaction

• CGI script languages
• AppleScript
• C/C
• Perl
• The Unix shell
• TCL
• Visual Basic
• ASP

5
(No Transcript)
6
Forms

• Field Each element in which user can enter
  information
• Field value Data entered in a field
• ltformgt lt/formgt Encloses the form elements and
  layout tags
• ltinputgt For each field you have to specify the
  type of input (text/input box, radio button etc)

7
Form structure

• ltformgt
• ltinput nameFNamegt
• ltinput nameAddressgt
• lt/formgt

8
(No Transcript)
9
ltFORMgt Attributes
ltform nametext actionURL methodoptiongt

• NAME Identifies the form
• ACTION specifies the URL (filename location)
  of the CGI script that will process the form
• METHOD Controls how the browser sends data to
  the Web server for the CGI Script.
• GET (default) Packages the form data by
  appending it to the end of the URL specified in
  the ACTION property
• POST Send form information in a separate data
  stream.
• Typically preferred safer.

10
ltINPUTgt attributes
ltinput nametext idid valuetext
sizevalue maxlength typepredefinedgt
Better to use both, old CGI scripts may not
recognize ID
Older standard

• NAME ID Identify the field
• SIZE Of the input box, in characters, default is
  20, does not limit the input
• VALUE Default text or number that will appear in
  the field
• MAXLENGTH Max of characters user can input
• TYPE text box is the default

11
Input types
12
Text boxes
ltinput namename idid valuevalue
sizevalue maxlengthvaluegt

• Typetext is the default value in input
• Creates text boxes
• NAME ID Identify the field
• SIZE Of the input box, in characters, default is
  20, does not limit the input
• VALUE Default text or number that will appear in
  the field
• MAXLENGTH Max of characters user can input
• htmlforms.htm

13
HTML Code for text boxes

• ltform actionscript.asp" method"post"gt
• lttable width"500" align"center"
  cellpadding"3"gt
• lttrgtlt!--first row--gt
• lttd width"40"gt First Name lt/tdgt
• lt!--text boxes--gt
• lttdgt ltinput value"Enter Name Here" name"fname"
  id"fname"gt lt/tdgt lt/trgt
• lttrgtlt!--second row--gt
• lttdgt Last Namelt/tdgt
• lttdgt ltinput name"lname" id"lname"gt
  lt/tdgtlt/trgtlt/tablegt
• lt/formgt

14
ltinput type option gt

• PASSWORD Characters typed by user are displayed
  as bullets or asterisks
• HIDDEN used to pass hidden information to the
  CGI script not viewable on the form (like the
  email of the person that should receive the
  form).
• The user does not see the content of the field
• The user is not allowed to change the value of
  the hidden field
• Usually all hidden fields are placed right after
  the ltformgt tag HTMForms

15

• lttrgt lt!--Password--gt
• lttdgt ltlabel for"pwd"gtPasswordlt/labelgt lt/tdgt
• lttdgt
• ltinput id"pwd" accesskey"P" type"password"
  maxlength"4" size"10" name"pw"gt
• lt/tdgt lt/trgt
• lttrgt lt!--hidden text--gt
• lttdgt ltinput type"hidden" value"true"
  name"test"gt
• lt/tdgtlt/trgt

16
Working with Form Labels

• Labels are added for scripting purposes.
• We can add a label to the text associated to a
  field
• ltlabel foridgt text to be labeled lt/labelgt
• Where the id is the value of the id attribute for
  a field on the form.
• If you use labels, then the ID attribute is
  required in input tag.

17
Radio buttons
ltinput typeradio nametext idtext
valuevalue checkedgt

• Display a list of choices from which the user
  makes a selection only one radio button can be
  selected
• NAME required! Specify the field containing the
  radio button it groups radio buttons together.
• ID required only if a label field is used
• VALUE the value sent to the CGI script
• CHECKED (optional) makes the particular radio
  button the default choice
• HTMForms

18

• lttrgt lt!--Radio buttons--gt
• lttd valign"top" rowspan"4"gt
• Choose your favorite color lt/tdgt
• lttdgt ltlabel for"radiog"gt Greenlt/labelgt
• ltinput id"radiog" type"radio"
  value"green" name"color"gt lt/tdgtlt/trgt
• lttrgtlttdgt Purple
• ltinput type"radio" checked value"purple"
  name"color"gt lt/tdgtlt/trgt
• lttrgtlttdgt Brown
• ltinput type"radio" value"brown"
  name"color"gt lt/tdgtlt/trgt
• lttrgtlttdgt Wheat
• ltinput type"radio" value"wheat"
  name"color"gtlt/tdgtlt/trgt

19
Check Boxes
ltinput typecheckbox nametext
idid valuevalue checkedgt

• It is either selected or not. There is only one
  check box per field
• NAME the field containing the check box
• ID identifies the field containing the check
  box.
• VALUE the value sent to the CGI script if the
  check box is selected (e.g. yes/no)
• CHECKED makes the particular check box the
  default choice
• HTMForms

20

• lttrgt lt!--Check box --gt
• lttd valign"top" rowspan"4"gt
• Choose your favorite style of music lt/tdgt
• lttdgt Alternative
• ltinput type"checkbox" value"1" name"music"gt
  lt/tdgtlt/trgt
• lttrgt lttdgt Jazz
• ltinput type"checkbox" checked value"2"
  name"music"gt lt/tdgt
• lttrgt lttdgt RampB
• ltinput type"checkbox" value"3" name"music"gt
  lttdgtlttrgt

21
Text area HTMFORMS
lttextarea namename idid rowsvalue
colsvaluegt Default text
lt/textareagt

• Allows users to enter to enter comments
• NAME ID specify the field containing the text
  area
• ROWS number of available lines
• COLS number of characters in each line
• WRAP

• OFF turns off text wrapping displayed in a
  single line
• SOFT (VIRTUAL) turn text wrapping on text sent
  to the CGI script in a single line
• HARD (PHISYCAL) turn text wrapping on and also
  sends this information to the Web server text
  is sent to CGI script exactly as it appears in
  the text box.

22

• lttrgt lt!--Text area--gt
• lttd colspan"2"gt lttextarea name"comments"
  rows"5" cols"40"gt
• Please Enter your comments here
• lt/textareagt
• lt/tdgtlt/trgt

23
Selection lists
ltselect nametext idid sizevalue
multiplegt ltoptiongt Item 1 ltoptiongt Item
2 lt/selectgt

• A list box from which the user selects a
  particular (set of ) value(s). (Drop-down menus)
• SIZE of items the list displays in the form
• MULTIPLE (optional) allows multiple selection -
  using the CTR or SHIFT key the user can select
  more than one item
• OPTION each item on the list
• HTMForms
• optgroup to create option groups HTMForms2

24

• lttrgt lt!--Selection List--gt
• lttdgt Select your statelt/tdgt
• lttdgt ltselect size"1" name"state"gt
• ltoption selectedgt------------lt/optiongt
• ltoption value"IL"gt Illinois lt/optiongt
• ltoption value"IN"gt Indiana lt/optiongt
• ltoptiongt------------lt/optiongt
• ltoption value"CA"gt California lt/optiongt
• ltoption value"MA"gt Massachusetts lt/optiongt
• lt/selectgt lt/tdgtlt/trgt

25
Form Buttons Reset/Submit buttons
ltinput typetext valuetext namename
ididgt

• Form fields that perform an action when activated
  (by the user clicking)
• VALUE text that appears on the button
• TYPE

submit Submits the form to the CGI script for
processing. reset Cancels or resets the form
to its original values button Performs an
action within the page by running a script
26

• lttrgt lt!--Form buttons--gt
• lttdgt
• ltinput type"submit" value"Submit Query"gt lt/tdgt
• lttdgt
• ltinput type"reset" value"Reset"gt lt/tdgtlt/trgt

27
Group box for radio buttons or check boxes
align top bottom right left

• ltfieldsetgt
• ltlegend alignaligngt legend text lt/legendgt
• (Collection of fields)
• lt/fieldsetgt

ltfieldsetgt ltlegend align"top"gt Choose your
favorite color lt/legendgt Green ltinput
type"radio" value"green" name"color"gt ltbr
/gt Purple ltinput type"radio" checked
value"purple" name"color"gt ltbr /gt Brown ltinput
type"radio" value"brown" name"color"gt ltbr
/gt Wheat ltinput type"radio" value"wheat"
name"color"gt lt/fieldsetgt htmforms2.htm
28
Image field
ltinput typeimage srcURL nametext idid
valuetextgt

• Inline images act like SUBMIT buttons. When the
  user clicks the image, the form is submitted.
• SRC filename or URL
• When the form is submitted to the CGI script, the
  coordinates corresponding to where the user
  clicked inside the image are attached to the NAME
  and VALUENAME.x_coordinate VALUE.y_coordinate

29
(No Transcript)
30
Homework assignment 4

• Case 2 page 6.56.
• Create the form described in your textbook.
• In addition to the requirements for case 2, add
  access keys to the text boxes.
• (For instance for the text box first name, set
  the access key equal to f. Users can use ALTf
  to access that box.
• In the form the text should appear as First
  name with the first F underlined to indicate
  that pressing ALTf will select that text box. )