forms a practical introduction comm 3353 communication web technologies i shawn w. mccombs, m.ed

FormsA Practical Introduction

COMM 3353Communication Web Technologies IShawn W. McCombs, M.Ed.

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

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)

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…

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<body>

<form><input type=“radio”>

</form>

</body>

Intrinsic XHTML Elements Intrinsic (built-in, standard) to SGML

• HTML, XHTML, DHTML, XML…(all legacy to SGML, around since the 60’s)

• Elements = Variable Data HoldersText Boxes Radio ButtonsText Areas Select BoxesCheck Boxes Buttons

• Others exist as well…

Hidden Elements hidden buttons

• IMPORTANT: Elements MUST be used inside of a <FORM> tag in order to work…

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.

http://msdn.microsoft.com/workshop/author/om/doc_object.asp

Window.Frames.Document.Form.Element.Value

The DOM, Continued…

WINDOWFRAME

DOCUMENTFORM

ELEMENT

Web Browser, App BrowserFrames(0), or frame NAMEDocuments(0), or anyname.htmlForms(0), or <form NAME=“x”>Elements(0), or <input name=“x”>

=


WINDOW Web Browser, App Browser=


FRAME Frames(0), or frame NAME= frames(1)-or- “main.html”frames(0)-or-“navwin.html”


DOCUMENT Documents(0), or anyname.html=


FORM Forms(0), or <form NAME=“x”>=


ELEMENT Elements(0), or <input name=“x”>=


VALUE Content of the Element=


Windows(0).frames(0).documents(0).elements(0).value= “Hello”

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.

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 element’s data is stored in the database for future interactivity.

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.

More to come…