© 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms

© 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

© 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 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 Target property

© 2009 Delmar Cengage Learning 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 outline Form command

© 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 –

© 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 –

© 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 Label button Insertion point between Label tags in Code view

© 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

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

© 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

© 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

© 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 –

© 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 ID New text field

© 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 = fishingChecked value = fishInitial state = Unchecked

© 2009 Delmar Cengage Learning Fig. 23: Radio Group Dialog Box First instance Second instance Line breaks ( 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 text box Hidden Field Hidden Field button

© 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

© 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