Database Driven Web Pages 2

1
Database Driven Web Pages 2

• Customizing FrontPage Generated Web Forms

2
Relevant Attributes and Events

• ltbody onloadgt
• window.event model
• window.event.keyCode
• form
• name (local ID)
• method (post or get)
• action (filespec of mailto info.)

• element
• type
• name
• value
• tabindex
• accesskey
• onclick (event)
• onkeydown (event)

3
Form Reference

• Forms and elements can be referred within an HTML
  file by
• form and element names directly
• e.g. this.myForm.submit() //this is optional
• e.g. this.frmSelect.min.value'200
• Using a form object and form array
  document.formsi.elementsj
• e.g. var f document.formsi
• e.g. var e1 document.formsi.elementsj

4
Programming Form Behaviors

• Check the keydown event, example
• function CkKeyDown()
• if (window.event.keyCode13) SelectCat()
• Transfer focus (control), example
• ltbody onload"frmSelect.priceCat.focus()"gt
• Simple validation, example
• function ValidateInput()
• if (myForm.YR.value ! 0)
• this.myForm.submit() //'this' refers to 'this
  document', optional
• myForm.YR.focus()
• else
• alert("Please enter a valid year!")
• myForm.YR.focus()

5
Other Input Types

• SELECT box
• Drop-down list box, example
• ltselect name"priceCat" tabindex"0"
  onkeydown"CkKeyDown()"gt
• ltoption value"1" selectedgtInexpensive
• ltoption value"2"gtModerate
• ltoption value"3"gtExpensive
• lt/selectgt
• SELECT box
• The value attribute can be implied, example
• ltselect name"priceCat" tabindex"0"
  onkeydown"CkKeyDown()gt
• ltoption value1 selectedgt1
• ltoptiongt2
• ltoptiongt3
• lt/selectgt
• NB onkeydown event will not be able to pick up
  the value on the first run.

6
Other Input Types

• HIDDEN element
• May be used to provide a data storage for the
  form, example
• ltinput type"hidden" name"min" value" "gt
• ltinput type"hidden" name"max" value" "gt