Forms and Form Elements

1
Forms and Form Elements

• The different aspects of Forms include
• The Form Object
• Defining Form Elements
• Scripting Form Elements
• Form Verification Example
• In JavaScript programs, the emphasis is not on
  form submission and processing but instead on
  event handling.
• A form and all input elements in it have event
  handlers that JavaScript can use to respond to
  user interactions within the form.
• If the user clicks on a checkbox, for example, a
  JavaScript program can receive notification
  through an event handler and might respond by
  changing the value displayed in some other
  element of the form

2
The Form Object

• The JavaScript Form object represents an HTML
  form.
• Forms are always found as elements of the forms
  array, which is a property of the Document
  object.
• Forms appear in this array in the order in which
  they appear within the document.
• Thus, document.forms0 refers to the first form
  in a document. You can refer to the last form in
  a document with the following
• document.formsdocument.forms.length-1
• The most interesting property of the Form object
  is the elements array, which contains
  JavaScript objects (of various types) that
  represent the various input elements of the form.
  
• Again, elements appear in this array in the same
  order they appear in the document

3
Submit and Reset

• In the days before JavaScript, a form was
  submitted with a special-purpose Submit button,
  and form elements had their values reset with a
  special-purpose Reset button.
• The JavaScript Form object supports two methods,
  submit( ) and (as of JavaScript 1.1) reset( ),
  that serve the same purpose.
• Invoking the submit( ) method of a Form submits
  the form, and
• Invoking reset( ) resets the form elements.

4
onsubmit and onreset event handlers

• To accompany the submit( ) and reset( ) methods,
  the Form object provides
• the onsubmit event handler to detect form
  submission and (as of JavaScript 1.1)
• the onreset event handler to detect form resets.
• The onsubmit handler is invoked just before the
  form is submitted it can cancel the submission
  by returning false.
• This provides an opportunity for a JavaScript
  program to check the user's input for errors in
  order to avoid submitting incomplete or invalid
  data over the network to a server-side program.

5
onsubmit and onreset event handlers

• Calling the submit( ) method of a form does not
  trigger the onsubmit handler.
• The onreset event handler is similar to the
  onsubmit handler.
• It is invoked just before the form is reset, and
  it can prevent the form elements from being reset
  by returning false.
• This allows a JavaScript program to ask for
  confirmation of the reset, which can be a good
  idea when the form is long or detailed.
• onreset is triggered only by a genuine Reset
  button. Calling the reset( ) method of a form
  does not trigger onreset.

6
HTML Form Elements
7
Description of the table

• The table lists the types of form elements that
  are available to HTML designers and JavaScript
  programmers.
• The first column of the table names the type of
  form element,
• The second column shows the HTML tags that are
  used to define elements of that type.
• The third column lists the value of the type
  property for each type of element.
• As we've seen, each Form object has an elements
  array that contains the objects that represent
  the form's elements.
• Each of these elements has a type property that
  can be used to distinguish one type of element
  from another.

8
Naming Forms and Form Elements

• Every form element has a name attribute that must
  be set in its HTML tag if the form is to be
  submitted to a server-side program.
• The ltformgt tag itself also has a name attribute
  that you can set. This attribute has nothing to
  do with form submission.
• It exists for the convenience of JavaScript
  programmers. If the name attribute is defined in
  a ltformgt tag, when the Form object is created for
  that form, it is stored as an element in the
  forms array of the Document object, as usual,
  and it is also stored in its own personal
  property of the Document object.
• The name of this newly defined property is the
  value of the name attribute.

9
Using form names

• Suppose we define a form with a tag like this
• ltform name"everything"gt
• This allowed us to refer to the Form object as
• document.everything
• Often, you'll find this more convenient than the
  array notation
• document.forms0
• Furthermore, using a form name makes your code
  position-independent it works even if the
  document is rearranged so that forms appear in a
  different order

10
Using names of elements with form names

• ltimggt, ltappletgt, and other HTML tags also have
  name attributes that work the same as the name
  attribute of ltformgt.
• With forms, however, this style of naming goes a
  step further, because all elements contained
  within a form also have name attributes.
• When you give a form element a name, you create a
  new property of the Form object that refers to
  that element. The name of this property is the
  value of the attribute.
• Thus, you can refer to an element named "zipcode"
  in a form named "address" as
• document.address.zipcode
• With reasonably chosen names, this syntax is much
  more elegant than the alternative, which relies
  on hardcoded (and position-dependent) array
  indices
• document.forms1.elements4

11
Using names of elements with form names

• In order for a group of Radio elements in an HTML
  form to exhibit mutually exclusive "radio-button"
  behavior, they must all be given the same name.
• For Example, we can define three Radio elements
  that all have a name attribute of "browser".
• When more than one element in a form has the same
  name attribute, JavaScript simply places those
  elements into an array with the specified name.
  The elements of the array are in the same order
  as they appear in the document. So, the Radio
  objects can be referred to as
• document.everything.browser0
• document.everything.browser1
• document.everything.browser2

12
Form Element Properties

• All (or most) form elements have the following
  properties in common. Some elements have other
  special-purpose properties that are described
  later, when we consider the various types of form
  elements individually
• type
• A read-only string that identifies the type of
  the form element. The third column of Table 15-1
  lists the value of this property for each form
  element.
• form
• A read-only reference to the Form object in which
  this element is contained.
• name
• A read-only string specified by the HTML name
  attribute.

13
Form Element Properties

• value
• A read/write string that specifies the "value"
  contained or represented by the form element.
  This is the string that is sent to the web server
  when the form is submitted, and it is only
  sometimes of interest to JavaScript programs.
• For Text and Textarea elements, this property
  contains the text that the user entered.
• For Button elements, this property specifies the
  text displayed within the button, which is
  something that you might occasionally want to
  change from a script.
• For Radio and Checkbox elements, however, the
  value property is not edited or displayed to the
  user in any way. It is simply a string set by the
  HTML value attribute that is passed to the web
  server when the form is submitted.

14
Form Element Event Handlers

• Most form elements support most of the following
  event handlers
• onclick
• Triggered when the user clicks the mouse on the
  element. This handler is particularly useful for
  Button and related form elements.
• onchange
• Triggered when the user changes the value
  represented by the element by entering text or
  selecting an option, for example. Button and
  related elements typically do not support this
  event handler because they do not have an
  editable value.
• Note that this handler is not triggered every
  time the user types a key in a text field, for
  example. It is triggered only when the user
  changes the value of an element and then moves
  the input focus to some other form element. That
  is, the invocation of this event handler
  indicates a completed change.
• onfocus
• Triggered when the form element receives the
  input focus.
• onblur
• Triggered when the form element loses the input
  focus

15
The this keyword

• An important thing to know about event handlers
  is that within the code of an event handler, the
  this keyword always refers to the document
  element that triggered the event.
• Since all form elements have a form property that
  refers to the containing form, the event handlers
  of a form element can always refer to the Form
  object as this.form.
• Going a step further, this means that an event
  handler for one form element can refer to a
  sibling form element named x as this.form.x.

16
Button

• The Button form element is one of the most
  commonly used, because it provides a clear visual
  way to allow the user to trigger some scripted
  action.
• The Button object has no default behavior of its
  own, and it is never useful in a form unless it
  has an onclick (or other) event handler.
• The value property of a Button element controls
  the text that appears within the button itself.
• In HTML 4, you can create Button, Submit, and
  Reset buttons with the ltbuttongt tag instead of
  the traditional ltinputgt tag. ltbuttongt is more
  flexible, because instead of simply displaying
  the plain text specified by the value attribute,
  it displays any HTML content (formatted text
  and/or images) that appears between ltbuttongt and
  lt/buttongt.

17
Toggle Buttons

• The Checkbox and Radio elements are toggle
  buttons, or buttons that have two visually
  distinct states they can be checked or
  unchecked.
• The user can change the state of a toggle button
  by clicking on it.
• Radio elements are designed to be used in groups
  of related elements, all of which have the same
  value for the HTML name attribute.
• Radio elements created in this way are mutually
  exclusive -- when you check one, the one that was
  previously checked becomes unchecked.

18
Check Box

• Checkboxes are also often used in groups that
  share a name attribute, and when you refer to
  these elements by name, you must remember that
  the object you refer to by name is an array of
  same-named elements
• For example, we can refer to an array of three
  Checkbox objects as
• document.everything.peripherals
• To refer to an individual Checkbox element, we
  must index the array
• document.everything.peripherals0 // First form
  element named "peripherals"

19
The checked property

• Radio and Checkbox elements both define a checked
  property.
• This read/write boolean value specifies whether
  the element is currently checked.
• The defaultChecked property is a read-only
  boolean that has the value of the HTML checked
  attribute it specifies whether the element was
  checked when the page was first loaded.

20
Text Fields

• The Text element is probably the most commonly
  used element in HTML forms and JavaScript
  programs.
• It allows the user to enter a short, single-line
  string of text.
• The value property represents the text the user
  has entered. You can set this property to specify
  explicitly the text that should be displayed in
  the field.
• The onchange event handler is triggered when the
  user enters new text or edits existing text and
  then indicates that he is finished editing by
  moving input focus out of the text field.

21
The Text Area Element

• The Textarea element is just like the Text
  element, except that it allows the user to input
  (and your JavaScript programs to display)
  multiline text.
• Textarea elements are created with a lttextareagt
  tag using a syntax significantly different from
  the ltinputgt tag used to create a Text element.
• Nevertheless, the two types of element behave
  quite similarly.
• You can use the value property and onchange
  event handler of a Textarea element just as you
  would for a Text element.

22
Password

• The Password element is a modified Text element
  that displays asterisks as the user types into
  it.
• As the name indicates, this is useful to allow
  the user to enter passwords without worrying
  about others reading over their shoulders.
• Password triggers its onchange event handler just
  as Text does.
• Note that the Password element protects the
  user's input from prying eyes, but when the form
  is submitted, that input is not encrypted in any
  way (unless it is submitted over a secure HTTPS
  connection), and it may be visible as it is
  transmitted over the network.

23
Select and Option Elements

• The Select element represents a set of options
  (represented by Option elements) from which the
  user can select. Browsers typically render Select
  elements in drop-down menus or list boxes.
• The Select element can operate in two very
  distinct ways, and the value of the type property
  depends on how it is configured.
• If the ltselectgt tag has the multiple attribute,
  the user is allowed to select multiple options,
  and the type property of the Select object is
  "select-multiple".
• Otherwise, if the multiple attribute is not
  present, only a single item may be selected, and
  the type property is "select-one".

24
Option Element

• In addition to its selected property, the Option
  element has a text property that specifies the
  string of plain text that appears in the Select
  element for that option.
• You can set this property to change the text that
  is displayed to the user.
• The value property is also a read/write string
  that specifies the text to be sent to the web
  server when the form is submitted.
• Even if you are writing a pure client-side
  program and your form never gets submitted, the
  value property (or its corresponding HTML value
  attribute) can be a useful place to store any
  data that you'll need if the user selects a
  particular option.

25
Hidden Elements

• As its name implies, the Hidden element has no
  visual representation in a form.
• It exists to allow arbitrary text to be
  transmitted to the server when a form is
  submitted.
• Server-side programs use this as a way to save
  state information that is passed back to them
  with form submission.
• Since they have no visual appearance, Hidden
  elements cannot generate events and have no event
  handlers.
• The value property allows to you read and write
  the text associated with a Hidden element, but,
  in general, Hidden elements are not commonly used
  in client-side JavaScript programming.