Tutorial 7

1. Tutorial 7 Creating Forms

2. Objectives • Session 7.1 • Create an HTML form • Insert fields for text • Add labels for form elements • Create radio buttons and check boxes • Session 7.2 • Insert drop-down lists • Create methods for sending data and clearing forms New Perspectives on Microsoft Expression Web 3.0

3. Objectives • Insert advanced command buttons • Create a way to upload a file • Organize and style form elements New Perspectives on Microsoft Expression Web 3.0

4. Visual OverviewForm Controls New Perspectives on Microsoft Expression Web 3.0

5. How Data is Collected and Processed • The XHTML form serves only to collect data • A form handler is necessary to process the data collected • A form handler is software that runs on a server or on the user’s computer and processes information entered into the form • Scripting languages are used to create scripts • Scripts (sets of programming instructions) transfer data to the form handler New Perspectives on Microsoft Expression Web 3.0

6. How Data is Collectedand Processed • Common scripting languages include • Perl • ASP • PHP • ColdFusion • JavaScript • Web scripts often referred to as CGI scripts • Common Gateway Interface • A standard for communicating with web servers New Perspectives on Microsoft Expression Web 3.0

7. How Data is Collectedand Processed • Data sent to a server is stored in a database • A database is an organized collection of data • A field represents a single kind of data in a database • The HTML form element serves as a container for all elements in a form • Check boxes • Radio buttons • Text boxes New Perspectives on Microsoft Expression Web 3.0

8. How Data is Collectedand Processed • Creating the Form • A form begins with a start <form> tag • Form Fields • Areas on the form where users provide the data requested • Field Name • Field Value • Prompting text New Perspectives on Microsoft Expression Web 3.0

9. How Data is Collectedand Processed • Using Controls • A control is an object inserted in a form which enables users to interact with the form • Command Button • A Windows control used to execute or reject user action, i.e., OK and Cancel buttons • Designer decides how to align the form controls • Enter form controls between the <p> and </p> tags New Perspectives on Microsoft Expression Web 3.0

10. How Data is Collectedand Processed • Use CSS • Create an HTML data table New Perspectives on Microsoft Expression Web 3.0

11. How Data is Collectedand Processed • Creating a Form Element • Every form must begin with a form element • This element appears in the Editing window with a dashed outline around its border • Form Control tools are located in the Toolbox panel • Collapse the Tags and ASP.NET Controls section of the Toolbox panel and close the Apply Styles panel • Form must be created within the Form control New Perspectives on Microsoft Expression Web 3.0

12. How Data is Collectedand Processed New Perspectives on Microsoft Expression Web 3.0

13. How Data is Collectedand Processed • Every form must have a name New Perspectives on Microsoft Expression Web 3.0

14. How Data is Collectedand Processed • Determining the Form Structure • Align form elements horizontally and vertically for easy reading • Create form elements using a table • Gridlines for form elements • Easy alignment • Float table left or right • Create form elements using CSS New Perspectives on Microsoft Expression Web 3.0

15. How Data is Collectedand Processed • Creating a Text Field • Use when creating just one line of text • Holds alphanumeric data • Use text field when you want to collect individual pieces of data • First name • Last name • Zip code New Perspectives on Microsoft Expression Web 3.0

16. How Data is Collectedand Processed • Use Text Box Properties dialog box to set unique characteristics • Text box name • Width • Password New Perspectives on Microsoft Expression Web 3.0

17. How Data is Collectedand Processed • Creating Radio Buttons • Used to select a single choice from several choices • Common to have one button pre-selected • Form can have several different groups of radio buttons • Each group must have a unique name • Each button must be assigned a value • A value is the data that is sent to the form handler New Perspectives on Microsoft Expression Web 3.0

18. How Data is Collectedand Processed • Each button needs to have label text that the user can see New Perspectives on Microsoft Expression Web 3.0

19. How Data is Collectedand Processed • Creating Check Boxes • Can select zero, one, or multiple items from a list • Assign the same group name to each group of check boxes • Assign a value to each check box that will be sent to the form handler • Assign a label to each check box New Perspectives on Microsoft Expression Web 3.0

20. How Data is Collectedand Processed New Perspectives on Microsoft Expression Web 3.0

21. Visual OverviewForm Controls New Perspectives on Microsoft Expression Web 3.0

22. How Data is Collectedand Processed • Creating a Drop-Down Box • Displays only one choice at a time • Helps conserve screen space • Assign a name to the control • The default choice created by Expression Web is displayed • Does not have a value • Can be modified • Use the Drop-Down Box Properties dialog box New Perspectives on Microsoft Expression Web 3.0

23. How Data is Collectedand Processed New Perspectives on Microsoft Expression Web 3.0

24. How Data is Collectedand Processed New Perspectives on Microsoft Expression Web 3.0

25. How Data is Collectedand Processed • Use the Drop-Down Box Property dialog box to add additional choices New Perspectives on Microsoft Expression Web 3.0

26. How Data is Collectedand Processed • Creating a Text Area • Allows user to enter multiple lines of text • Often used to gather comments/feedback from customers • Assign a name to the control • Set the height and width • Default is 2 rows high and 20 columns wide New Perspectives on Microsoft Expression Web 3.0

27. How Data is Collectedand Processed New Perspectives on Microsoft Expression Web 3.0

28. How Data is Collectedand Processed • Inserting an Upload File Control • Allows user to send a file when the Submit button is clicked • Displays a text box in which name of file can be entered New Perspectives on Microsoft Expression Web 3.0

29. How Data is Collectedand Processed • Creating Command Buttons • A Command Button is a Windows control • OK and Cancel buttons are often seen on Web pages • OK – submits the data • In an HTML form the input type “Submit” is used to transmit data contained in the form • Cancel – clears the form • The input type “Reset” is used to clear the form New Perspectives on Microsoft Expression Web 3.0

30. How Data is Collectedand Processed • Command buttons are also called push buttons • Text that appears on each button can be changed but cannot be styled New Perspectives on Microsoft Expression Web 3.0

31. How Data is Collectedand Processed New Perspectives on Microsoft Expression Web 3.0 • Creating an Advanced Button • It is a Command button that can be styled • Uses the HTML <button> element • Image can also be used as a button • Use the Advanced Button Properties dialog box to change button type and button text

32. How Data is Collectedand Processed New Perspectives on Microsoft Expression Web 3.0

33. How Data is Collectedand Processed • Organizing Form Controls • Organize form controls so they appear in the browser in related groups • Textboxes in one group • Radio buttons and check boxes in another • Command buttons in a third group • Two XHTML elements available to organize form controls • Fieldset element – draws border around related groups New Perspectives on Microsoft Expression Web 3.0

34. How Data is Collectedand Processed • Legend element – provides a caption that appears as part of the border • Use the Group Box control on the Toolbox panel to create the fieldset and legend elements • Both can be styled, which allows for greater variety and visual interest New Perspectives on Microsoft Expression Web 3.0

35. How Data is Collectedand Processed New Perspectives on Microsoft Expression Web 3.0

36. How Data is Collectedand Processed New Perspectives on Microsoft Expression Web 3.0

37. How Data is Collectedand Processed • Completing and Styling the Form • Use the Option Button Properties dialog box to edit a setting for a radio button • Remove the table borders • Create a style for the form element to change the font, the margins, and the width New Perspectives on Microsoft Expression Web 3.0

38. How Data is Collectedand Processed New Perspectives on Microsoft Expression Web 3.0