HTML Forms: Interacting with the User

1
Chapter 6

• HTML Forms Interacting with the User

2
HTML Forms

• Way of grouping HTML interaction elements with a
  common purpose together
• A Document can contain one or more Forms and a
  Form can contain one or more Elements
• ltFORM NAME myNamegt
• lt/FORMgt
• Example chp6_examp_1.html
• onload event handler
• Call to document.forms.length

3
Other Form Object Properties

• elements
• document.myForm.length
• document.myForm.elements.length
• submit() method
• reset() method

4
HTML Elements in Forms

• ltINPUT TYPE buttongtlt/INPUTgt
• checkbox, file, hidden, password, radio, reset,
  select-one, select-multiple, submit, text,
  textarea

5
Common Properties and Methods

• name
• Allows code to reference a particular form
  element by its name
• value
• What this does, depends on the type of element.
  For example, in a button, the value is what is
  displayed on the button face.
• form
• Essentially gives back a reference to the form
  that contains the element.
• type
• Returns the type of the element
• Example Form elements example.html

6
Common Properties and Methods

• focus()
• Method that sets the focus to a particular
  control
• blur()
• Method that removes the focus from a particular
  control
• onfocus
• Event that is fired when that control gets
  focus
• onblur
• Event that is fired when that button loses focus

7
Button Form Elements

• ltINPUT TYPE button NAME myButton VALUE
  Click Megt
• onclick
• Example chp6_examp2.html
• Note use of global variable
• numberOfClicks
• Example ch6_examp3.html
• Events
• onmouseup onmousedown
• Submit and Reset Buttons

8
Text Elements

• Used to allow user to enter a single line of text
• ltINPUT TYPEtext NAMEmyTextBox SIZE10
  MAXLENGTH15 VALUE Hello Worldgt
• Example ch6_examp4.html
• focus() method
• select() method
• onchange event
• Password Text Box
• Hidden Text Box

9
Textarea Element

• Allows multiple line input
• Has its own tag
• ltTEXTAREA NAMEmyTextArea COLS40 ROWS20gt

10
Checkboxes Radio Buttons

• ltINPUT TYPE checkbox NAMEchkDVD CHECKED
  VALUEDVDgt
• ltINPUT TYPE radio NAMEradCPUSpeed CHECKED
  VALUE1 GHzgt
• Example ch6_examp6.html
• Checked property

11
The Select Elements

• Drop down list and list box
• ltSELECT NAMEtheDay SIZE5gt
• ltOPTION VALUE0 SELECTEDgtMonday
• ltOPTION VALUE1gtTuesday
• ltOPTION VALUE2gtWednesday
• ltOPTION VALUE3gtThursday
• ltOPTION VALUE4gtFriday
• ltOPTION VALUE5gtSaturday
• ltOPTION VALUE6gtSunday
• lt/SELECTgt

12
The Select Elements

• Properties
• An array of Options accessible in JavaScript as
  options
• Each options specified by ltOPTIONgt
• Length is a read-only property that tells us how
  many options there are
• Number of items shown at a time is specified by
  SIZE, so if you want a drop-down list, specify
  SIZE 1
• selectedIndex
• index
• text
• Value

13
The Select Elements

• Adding New Options
• Create a new Option object
• var myNewOption new Option(TheText,
  TheValue)
• document.theForm.theSelecteObject.options0
  myNewOption
• document.theForm.theSelectObject.options0
  null
• Example ch6_examp7.html
• IE additional functionality
• add()
• remove()
• Ch6_examp8_IE.html

14
Select Element Events

• onblur
• onfocus
• Onchange
• Example ch6_examp9.html

15
The Trivia Quiz

• Previously
• Defined questions and answers in arrays
• Written function to check users answer
• Now to add some elements to a page using HTML
  tags and JavaScript to handle events
• Creating the Form
• Creating the Answer Radio Buttons