Forms A Practical Introduction

1
FormsA Practical Introduction

• COMM 3353
• Communication Web Technologies I
• Shawn W. McCombs, M.Ed.

2
Forms

• Form Basics
• Intrinsic XHTML Elements
• The Document Object Model (DOM)
• How It All Works

3
Forms Basics and Overview

• Forms on the Internet are used to facilitate the
  gathering of data, manipulation through an
  intermediate, and submission/distribution to and
  from a remote database.
• Forms represent only part of several key
  components that are needed to achieve this type
  of functionality
• Necessary Components include
• Form (containing Intrinsic Elements)
• Intermediate (ASP, JSP, etc)
• Database (MS Access, Oracle, FileMaker,
  ColdFusion)

4
Forms Basics and Overview

• Forms can be easily related to their
  non-Internet counterparts
• Traditional, printed forms can can contain many
  of the same data collection tools used online
• They are both used to record data
• They are both submitted through an intermediate
• They are both acted upon by some function
  following submission
• They are both usually compared, analyzed,
  tabulated, or pooled with other homogenous forms
• The Principle Difference, of course
• Online forms are electronic, and can make data
  analysis and collection much easier.
• A Must as a research tool

5
Forms Basics and Overview

• The form as a Container
• A set of html tags that identify the beginning
  and end of a form within a document, whose job is
  to hold, manage, and identify Intrinsic Elements
  within an HTML document.
• best if thought of as a place holder for data.
• Hierarchically significant and similar to HTML
• ltbodygt
• ltformgt
• ltinput typeradiogt
• lt/formgt
• lt/bodygt

6
Intrinsic XHTML Elements

• Intrinsic (built-in, standard) to SGML
• HTML, XHTML, DHTML, XML
• (all legacy to SGML, around since the 60s)

• Elements Variable Data Holders

Text Boxes Radio Buttons Text Areas Select
Boxes Check Boxes Buttons

• Others exist as well

Hidden Elements hidden buttons

• IMPORTANT Elements MUST be used inside of a
  ltFORMgt tag in order to work

7
The Document Object Model (DOM)

• Utilizes the Object Model Flow Chart
• A systematic methodology for symbolic addressing
  to precise, inanimate electronic elements whose
  virtual location would otherwise be fictional.
• Identifies key structural levels relating to
  data transmission, beginning at the Windows(0)
  level and transcending intermediate elements down
  to the Elements(0).value level.

Window.Frames.Document.Form.Element.Value
http//msdn.microsoft.com/workshop/author/om/doc_o
bject.asp
8
The DOM, Continued
WINDOW FRAME DOCUMENT FORM ELEMENT
Web Browser, App Browser Frames(0), or frame
NAME Documents(0), or anyname.html Forms(0), or
ltform NAMExgt Elements(0), or ltinput namexgt

9
The DOM, Continued

WINDOW
Web Browser, App Browser
10
The DOM, Continued

FRAME
Frames(0), or frame NAME
frames(1)-or- main.html
frames(0)-or-navwin.html
11
The DOM, Continued

DOCUMENT
Documents(0), or anyname.html
12
The DOM, Continued

FORM
Forms(0), or ltform NAMExgt
13
The DOM, Continued

ELEMENT
Elements(0), or ltinput namexgt
14
The DOM, Continued

VALUE
Content of the Element
15
The DOM, Continued
Windows(0).frames(0).documents(0).elements(0).valu
e Hello
16
How It All Works

• A Form is constructed using an XHTML derivative
  (html, xml, xhtml, dhtml, etc)
• Elements are placed at the appropriate locations
  within the document
• An Intermediate is invoked which tells the
  elements how to interact with the database (ASP,
  JSP, CF, etc)
• A Relational Database is constructed to act as a
  collection/dissemination point for collected
  data.

17
How It All Works, Continued

• A valid user accesses an online form via
  hyperlink.
• The user enters data in the elements within the
  document.
• The user initiates validation and submission of
  data by selecting a Submit button
• The onClick event (clicking the button) invokes
  the Intermediate (ASP, JSP, etc.) - or code -
  which tell modify the data in the elements,
  transforming that data into content understood by
  the database
• The elements data is stored in the database for
  future interactivity.

18
Summary

• Forms use built-in html elements to allow users
  the ability to enter variable data.
• Forms use the DOM to virtually address each
  element for the purpose of collecting and
  manipulating that data.
• Forms invoke instructions using an Intermediate,
  which uses programming to communicate variable
  data to and from a Relational Database.

19

• More to come