Date post: | 19-Jan-2016 |
Category: |
Documents |
Upload: | camron-shepherd |
View: | 217 times |
Download: | 1 times |
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”>
=
The DOM, Continued…
WINDOW Web Browser, App Browser=
The DOM, Continued…
FRAME Frames(0), or frame NAME= frames(1)-or- “main.html”frames(0)-or-“navwin.html”
The DOM, Continued…
DOCUMENT Documents(0), or anyname.html=
The DOM, Continued…
FORM Forms(0), or <form NAME=“x”>=
The DOM, Continued…
ELEMENT Elements(0), or <input name=“x”>=
The DOM, Continued…
VALUE Content of the Element=
The DOM, Continued…
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…