© 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.
-
Upload
whitney-park -
Category
Documents
-
view
220 -
download
0
Transcript of © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.
![Page 1: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/1.jpg)
© 2010 Delmar, Cengage Learning
Chapter 8
Collecting Data with Forms
![Page 2: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/2.jpg)
© 2009 Delmar Cengage Learning
1. Plan and create a form
2. Edit and format a form
3. Work with form objects
4. Test and process a form
Chapter 8 Lessons
![Page 3: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/3.jpg)
© 2009 Delmar Cengage Learning
Collecting Data with Forms
• Adding a form to a Web page provides interactivity between your viewers and your business
• Use forms to collect data from viewers• A form on a Web page consists of form
objects• All forms are connected to an application
that processes the information that the form collects
![Page 4: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/4.jpg)
© 2009 Delmar Cengage Learning
Planning Forms
• Plan a new form• Make a sketch of the form• Decide what information you want to
collect from user
![Page 5: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/5.jpg)
© 2009 Delmar Cengage Learning
Planning a Form
• Write down the information you want to collect and the order in which you want to collect it
• Organize the information in a logical order• Make a sketch of the form
![Page 6: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/6.jpg)
© 2009 Delmar Cengage Learning
Fig. 1: Sketch of Web Form
![Page 7: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/7.jpg)
© 2009 Delmar Cengage Learning
Creating Forms
• To create a form on a Web page:– Use the Insert Form button in the Forms
category of the Insert bar Dashed red outline appears around the
form– Configure the form
Should “talk” to the scripts or e-mail server
and processes the information submitted by the viewer
![Page 8: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/8.jpg)
© 2009 Delmar Cengage Learning
Processing Form Information
• There are two primary types of programs that can process the information your form collects:– Server-side scripting
• Server-side applications– Client-side scripting
• Scripts on the Web page itself
![Page 9: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/9.jpg)
© 2009 Delmar Cengage Learning
Server-side Scripting
• Uses applications that reside on the Web Server and interacts with the information collected in the forms
• Examples include:– Common Gateway Interface (CGI)– Cold Fusion– Active Server Pages (ASP)
![Page 10: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/10.jpg)
© 2009 Delmar Cengage Learning
Client-side Scripting
• Form is processed on the user’s computer• Script resides on Web page (not on server)• Examples include:
– JavaScript – Jscript
![Page 11: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/11.jpg)
© 2009 Delmar Cengage Learning
Setting Form Properties
• Action: specifies the application or script that will process the form information/data
• Method: specifies the HTTP method used to send the form data to the Web server– GET– POST
![Page 12: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/12.jpg)
© 2009 Delmar Cengage Learning
Fig. 2: Form Controls in the Property Inspector
Form
Form properties
Form name property
Method property
Action property
Target property
![Page 13: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/13.jpg)
© 2009 Delmar Cengage Learning
Fig. 3: CGI Process on Web Server
![Page 14: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/14.jpg)
© 2009 Delmar Cengage Learning
Insert a Form
• Before you can add form objects to your form, you must create a form area
• The form area will have a name and set the Action and Method of the form
![Page 15: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/15.jpg)
© 2009 Delmar Cengage Learning
Fig. 4: New Form Inserted on Feedback Page
Form outline
Form command
![Page 16: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/16.jpg)
© 2009 Delmar Cengage Learning
Fig. 5: Property Inspector Showing Properties of Selected Form
Form ID box Method specifying data transfer method
Method list arrow
![Page 17: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/17.jpg)
© 2009 Delmar Cengage Learning
Edit and Format a Form
• Insert a table to create a basic structure for the form
• Organize the form into different categories by inserting fieldsets
• Add and format labels
![Page 18: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/18.jpg)
© 2009 Delmar Cengage Learning
Using Tables to Layout a Form
• To make sure that your labels and form objects appear in the exact positions you want on a web page, you can place them in table cells
• You create the table within the form outline or area
![Page 19: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/19.jpg)
© 2009 Delmar Cengage Learning
Fig. 6: Website Using a Table to Lay Out a Form
Federal Bureau of Investigation website
– www.fbi.gov
![Page 20: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/20.jpg)
© 2009 Delmar Cengage Learning
Using Fieldsets to Group Form Objects• Fieldset: HTML tag used to group related
form elements• Can have multiple fieldsets per page• To create a fieldset, use the Fieldset button
on the Insert bar
![Page 21: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/21.jpg)
© 2009 Delmar Cengage Learning
Adding Labels to Form Objects• You can add labels to a form using the
following methods:– Type a label in the appropriate table cell
of your form– Use the Label button on the Forms group
of the Insert bar • Use simple and obvious labels
![Page 22: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/22.jpg)
© 2009 Delmar Cengage Learning
Fig. 7: Website Using Clearly Marked Labels
Clearly labeled groups
Clearly labeled options within groups
Southwest Airlines website used with permission from Southwest Airlines – www.southwest.com
![Page 23: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/23.jpg)
© 2009 Delmar Cengage Learning
Fig. 9: Table Dialog Box
Top header option
Table summary
![Page 24: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/24.jpg)
© 2009 Delmar Cengage Learning
Fig. 11: Typing and Formatting Labels in Table Cells
![Page 25: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/25.jpg)
© 2009 Delmar Cengage Learning
Fig. 12: Adding a Label to a Form
Label button
Insertion point between Label tags in Code view
![Page 26: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/26.jpg)
© 2009 Delmar Cengage Learning
• A form provides a structure in which you can place form objects
• Form objects allow viewers to provide information and interact with the website– For example: checkboxes, text boxes– Also called form elements, form controls
or fields
Understanding Form Objects
![Page 27: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/27.jpg)
© 2009 Delmar Cengage Learning
Understanding Form Objects
• Text fields• Text area fields• Checkboxes• Radio buttons• Radio groups
• Menu/list• Hidden fields• Image fields• Jump menus
![Page 28: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/28.jpg)
© 2009 Delmar Cengage Learning
• Text fields are used for collecting a string of characters
• A text area field is a text field that can store several lines of text
• Checkboxes are used to create a list of options from which a viewer can make multiple selections
Understanding Form Objects
![Page 29: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/29.jpg)
© 2009 Delmar Cengage Learning
• Radio buttons provide a list of options from which only one selection can be made– A group of radio buttons is called a radio
group• Menus are used to select a single option
from a list of choices• Lists are used to select one or more options
from a list of choices
Understanding Form Objects
![Page 30: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/30.jpg)
© 2009 Delmar Cengage Learning
• Hidden fields provide information to the Web server and form processing script without the viewer knowing that the information is being sent
• The Image Field button is used to create buttons that contain custom graphics
• Jump menus are navigational menus
Understanding Form Objects
![Page 31: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/31.jpg)
© 2009 Delmar Cengage Learning
Fig. 14: Website with Several Form Objects
Radio button
Submit button
Menu list
Text field
American Airlines website used with permission from American Airlines – www.aa.com
![Page 32: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/32.jpg)
© 2009 Delmar Cengage Learning
Using Dreamweaver Exchange
• To obtain form controls designed for creating specific types of forms, such as online tests and surveys, you can visit Adobe Dreamweaver Exchange
• The Adobe Exchange site is a central storage location for program extensions, also known as add-ons
![Page 33: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/33.jpg)
© 2009 Delmar Cengage Learning
Fig. 17: Property Inspector Showing Properties of Selected Text Field
Text Field button
ID
New text field
![Page 34: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/34.jpg)
© 2009 Delmar Cengage Learning
Fig. 18: Form with Single-Line Text Fields Added
![Page 35: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/35.jpg)
© 2009 Delmar Cengage Learning
Fig. 20: Input Tag Accessibility Attributes Dialog Box for Fishing Label
Fishing ID
Fishing label
Wrap with label tag option button
After form item option button
![Page 36: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/36.jpg)
© 2009 Delmar Cengage Learning
Fig. 21: Property Inspector with Check Box Properties Displayed
Fishing checkbox selected
Checkbox name = fishing Checked value = fish Initial state = Unchecked
![Page 37: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/37.jpg)
© 2009 Delmar Cengage Learning
Fig. 23: Radio Group Dialog Box
First instance
Second instance
Line breaks (<br> tags) option button
![Page 38: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/38.jpg)
© 2009 Delmar Cengage Learning
Fig. 26: List Values Dialog Box
Addbutton
New item labels
Values of new items
![Page 39: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/39.jpg)
© 2009 Delmar Cengage Learning
Fig. 28: Property Inspector Showing Properties of Selected Hidden Field
Hidden Field text box
Hidden Field
Hidden Field button
![Page 40: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/40.jpg)
© 2009 Delmar Cengage Learning
Fig. 29: New Submit and Reset Buttons Added to Form
Submit button
Reset button
Button name text box
Value text box
Button button
![Page 41: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/41.jpg)
© 2009 Delmar Cengage Learning
Test a Form
• After creating a form, it should be tested to make sure:– It works correctly– It is easy to use
• You should always have several people test your form before you publish it
![Page 42: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/42.jpg)
© 2009 Delmar Cengage Learning
Creating User-Friendly Forms
• Label required fields (use colored *)• Forms should have good contrast between
the color of the text and the color of the table background
• There should be a logical flow for the data fields
• The Submit and Reset buttons should be at the end of the form
![Page 43: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/43.jpg)
© 2009 Delmar Cengage Learning
Testing Dynamic Content
• Dynamic content• Testing server• Static content
![Page 44: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/44.jpg)
© 2009 Delmar Cengage Learning
Fig. 31: Viewing the Feedback Link
Link to feedback page
![Page 45: © 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ebe5503460f94bc7953/html5/thumbnails/45.jpg)
© 2009 Delmar Cengage Learning
Fig. 32: Testing the Feedback Page