Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Chapter PowerPoint
Document related concepts
no text concepts found
Transcript
Chapter 8 Collecting Data with Forms © 2010 Delmar, Cengage Learning Chapter 8 Lessons 1. Plan and create a form 2. Edit and format a form 3. Work with form objects 4. Test and process a form © 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 © 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 © 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 © 2009 Delmar Cengage Learning Fig. 1: Sketch of Web Form © 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 © 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 © 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) © 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 © 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 © 2009 Delmar Cengage Learning Fig. 2: Form Controls in the Property Inspector Form Form properties Form name property Method property Action property © 2009 Delmar Cengage Learning Target property Fig. 3: CGI Process on Web Server © 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 © 2009 Delmar Cengage Learning Fig. 4: New Form Inserted on Feedback Page Form command Form outline © 2009 Delmar Cengage Learning Fig. 5: Property Inspector Showing Properties of Selected Form Form ID box Method specifying data transfer method Method list arrow © 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 © 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 © 2009 Delmar Cengage Learning Fig. 6: Website Using a Table to Lay Out a Form Federal Bureau of Investigation website – www.fbi.gov © 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 © 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 © 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 © 2009 Delmar Cengage Learning Fig. 9: Table Dialog Box Top header option Table summary © 2009 Delmar Cengage Learning Fig. 11: Typing and Formatting Labels in Table Cells © 2009 Delmar Cengage Learning Fig. 12: Adding a Label to a Form Insertion point between Label tags in Code view Label button © 2009 Delmar Cengage Learning Understanding Form Objects • 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 © 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 © 2009 Delmar Cengage Learning Understanding Form Objects • 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 © 2009 Delmar Cengage Learning Understanding Form Objects • 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 © 2009 Delmar Cengage Learning Understanding Form Objects • 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 © 2009 Delmar Cengage Learning Fig. 14: Website with Several Form Objects Text field Radio button Menu list Submit button American Airlines website used with permission from American Airlines – www.aa.com © 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 © 2009 Delmar Cengage Learning Fig. 17: Property Inspector Showing Properties of Selected Text Field Text Field button New text field ID © 2009 Delmar Cengage Learning Fig. 18: Form with Single-Line Text Fields Added © 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 © 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 © 2009 Delmar Cengage Learning Fig. 23: Radio Group Dialog Box First instance Second instance Line breaks (<br> tags) option button © 2009 Delmar Cengage Learning Fig. 26: List Values Dialog Box Add button New item labels Values of new items © 2009 Delmar Cengage Learning Fig. 28: Property Inspector Showing Properties of Selected Hidden Field Hidden Field button Hidden Field Hidden Field text box © 2009 Delmar Cengage Learning Fig. 29: New Submit and Reset Buttons Added to Form Button button Submit button Reset button Button name text box Value text box © 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 © 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 © 2009 Delmar Cengage Learning Testing Dynamic Content • Dynamic content • Testing server • Static content © 2009 Delmar Cengage Learning Fig. 31: Viewing the Feedback Link Link to feedback page © 2009 Delmar Cengage Learning Fig. 32: Testing the Feedback Page © 2009 Delmar Cengage Learning
