Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.
-
Upload
camron-shepherd -
Category
Documents
-
view
217 -
download
1
Transcript of Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.
![Page 1: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/1.jpg)
FormsA Practical Introduction
COMM 3353Communication Web Technologies IShawn W. McCombs, M.Ed.
![Page 2: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/2.jpg)
Forms Form Basics Intrinsic XHTML Elements The Document Object Model (DOM) How It All Works
![Page 3: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/3.jpg)
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)
![Page 4: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/4.jpg)
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…
![Page 5: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/5.jpg)
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>
![Page 6: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/6.jpg)
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…
![Page 7: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/7.jpg)
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
![Page 8: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/8.jpg)
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”>
=
![Page 9: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/9.jpg)
The DOM, Continued…
WINDOW Web Browser, App Browser=
![Page 10: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/10.jpg)
The DOM, Continued…
FRAME Frames(0), or frame NAME= frames(1)-or- “main.html”frames(0)-or-“navwin.html”
![Page 11: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/11.jpg)
The DOM, Continued…
DOCUMENT Documents(0), or anyname.html=
![Page 12: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/12.jpg)
The DOM, Continued…
FORM Forms(0), or <form NAME=“x”>=
![Page 13: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/13.jpg)
The DOM, Continued…
ELEMENT Elements(0), or <input name=“x”>=
![Page 14: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/14.jpg)
The DOM, Continued…
VALUE Content of the Element=
![Page 15: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/15.jpg)
The DOM, Continued…
Windows(0).frames(0).documents(0).elements(0).value= “Hello”
![Page 16: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/16.jpg)
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.
![Page 17: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/17.jpg)
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.
![Page 18: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/18.jpg)
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.
![Page 19: Forms A Practical Introduction COMM 3353 Communication Web Technologies I Shawn W. McCombs, M.Ed.](https://reader035.fdocuments.us/reader035/viewer/2022062409/5697c02a1a28abf838cd7bbd/html5/thumbnails/19.jpg)
More to come…