1. Microsoft Expression Web-Illustrated Unit J: Creating Forms

2. Objectives Understand forms and form controls Add a form to a Web page Group form controls Add a text box Add radio buttons Microsoft Expression Web - Illustrated

3. Objectives Add checkboxes Add a drop-down box Add a text area Add buttons Microsoft Expression Web - Illustrated

4. Understanding Forms and Form Controls Required components of a form  Form element  Form control or form field  Submit button Common form controls  Text input or text box  Text area  Radio button  Checkbox  Drop-down box  Button Microsoft Expression Web - Illustrated

5. Understanding Forms and Form Controls Form-handling scripts (or form handlers) file and process the information entered into a form so that data can be stored or used to initiate other actions An action allows you to specify the file- path of the form-handling script Microsoft Expression Web - Illustrated

6. Understanding Forms and Form Controls Microsoft Expression Web - Illustrated

7. Understanding Forms and Form Controls Microsoft Expression Web - Illustrated Sample Form

8. Adding a Form to a Web Page Launch Expression Web, open a site, then open a page you need to add a form too Click the Maximize button on the Toolbox task pane, then if necessary click the plus sign next to Form Controls Microsoft Expression Web - Illustrated

9. Adding a Form to a Web Page Click after text, then press [Enter] Click the p tab on the visual aid (see the figure on the following slide) Microsoft Expression Web - Illustrated

10. Adding a Form to a Web Page Microsoft Expression Web - Illustrated

11. Adding a Form to a Web Page Double-click Form in the Form Controls list on the Toolbox task pane Save your changes Microsoft Expression Web - Illustrated

12. Grouping Form Controls Click inside the form, double-click Group Box in the Form Controls list on the Toolbox task pane, then compare your screen to the figure on the following slide Right-click the group box you just inserted, click Group Box Properties, click the Label text box, type a title for the box, then click OK Microsoft Expression Web - Illustrated

13. Grouping Form Controls Microsoft Expression Web - Illustrated

14. Grouping Form Controls Press, then double-click Group Box on the Toolbox task pane Microsoft Expression Web - Illustrated

15. Grouping Form Controls Right-click the group box you just inserted, click Group Box Properties, type a label in the Label text box, then click OK Press, double-click Group Box on the Toolbox task pane, right-click on the group box you just inserted, click Group Box Properties, type other information in the Label text box, click OK, then compare your screen to the figure on the following slide Microsoft Expression Web - Illustrated

16. Grouping Form Controls Save your changes, preview the page in a browser, close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

17. Adding a Text Box Click inside the Your Information group box, double-click Paragraph in the Tags list on the Toolbox task pane, type Name, press [Shift][Enter] Microsoft Expression Web - Illustrated

18. Adding a Text Box Double-click Input (Text) in the Form Controls list on the Toolbox task pane Right-click the text box you just inserted, then click Form Field Properties Type name in the Name text box, compare your screen to the figure on the following slide, then click OK Microsoft Expression Web - Illustrated

19. Adding a Text Box Microsoft Expression Web - Illustrated

20. Adding a Text Box Press, press [Enter], then type Email Address Press [Shift][Enter], double-click Input (Text) in the Form Controls list on the Toolbox task pane, right-click the text box you just inserted, click Form Field Properties, type email in the Name text box, then click OK Microsoft Expression Web - Illustrated

21. Adding a Text Box Click inside the group box, double-click Paragraph in the Tags list on the Toolbox task pane, then type a name for the text box Press [Shift][Enter], double-click Input (Text) on the Toolbox task pane, right- click the text box you just inserted, click Form Field Properties, type date in the Name text box, click OK, then click outside the visual aid to deselect it Microsoft Expression Web - Illustrated

22. Adding Radio Buttons Click to the right of the text box, press [Enter], double-click Paragraph in the Form Controls list on the Toolbox task pane, type Location, then press [Shift][Enter] Double-click Input (Radio) in the Form Controls list on the Toolbox task pane Right-click the radio button you just inserted, then click Form Field Properties Microsoft Expression Web - Illustrated

23. Adding Radio Buttons Type a title for the box in the Group name text box, click in the Value text box, type the different names you want on the radio buttons and then click OK Microsoft Expression Web - Illustrated

24. Adding Radio Buttons Click to the right of the radio button you just inserted, type the title, then press [Shift][Enter] Microsoft Expression Web - Illustrated

25. Adding Radio Buttons Double-click Input (Radio) on the Toolbox task pane, right-click the radio button you just inserted, then click Form Field Properties Click in the Value text box, type lounge, click the Not selected radio button, then click OK Click to the right of the radio button you just inserted, double-click Paragraph on the Toolbox task pane, type Lounge, then compare your screen to the figure on the following slide Save your changes, preview the page in a browser, click one of the radio buttons, close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

26. Adding Checkboxes Click the Optional Information group box, double-click Paragraph in the Form Controls list on the Toolbox task pane, type a checkbox title, then press [Shift][Enter] Double-click Input (Checkbox) in the Form Controls list on the Toolbox task pane, right-click the checkbox you just inserted, then click Form Field Properties Microsoft Expression Web - Illustrated

27. Adding Checkboxes Type a name in the Name text box, click in the Value text box, type it again, make sure the Not checked option button is selected, compare your screen to the figure on the following page, then click OK Microsoft Expression Web - Illustrated

28. Adding Checkboxes Microsoft Expression Web - Illustrated Completed Check Box Properties dialog box

29. Adding Checkboxes Click to the right of the checkbox, type what you would like the choice to be, then press [Shift][Enter] Microsoft Expression Web - Illustrated

30. Adding Checkboxes Double-click Input (Checkbox) on the Toolbox task pane, right-click the checkbox you just inserted, click Form Field Properties, type website in the Name text box, click in the Value text box, type website, make sure the Not checked radio button is selected, then click OK Save your changes, preview the page in a browser, click to add a check mark to at least two of the checkboxes, close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

31. Adding Checkboxes Save your changes, preview the page in a browser, click to add a check mark to at least two of the checkboxes, close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

32. Adding a Drop-Down Box Click after the last checkbox, press [Enter], type what you would like the Drop-Down box to be titled, then press [Shift][Enter] Double-click Drop-Down Box in the Form Controls list on the Toolbox task pane, right-click the drop-down box you just inserted, click Form Field Properties Microsoft Expression Web - Illustrated

33. Adding a Drop-Down Box Microsoft Expression Web - Illustrated

34. Adding a Drop-Down Box Click in the Name text box, select the text Select1, press [Delete], type what you would like it to be called, then click Add Microsoft Expression Web - Illustrated

35. Adding a Drop-Down Box Type your first choice in the Choice text box, then click OK Click the Add button, type a second choice in the Choice text box, then click OK Microsoft Expression Web - Illustrated

36. Adding a Drop-Down Box Microsoft Expression Web - Illustrated Add Choice dialog box with 2 choices added

37. Adding a Drop-Down Box Click the first line in the Choice list, click Modify, type Select an area of interest: in the Choice list, then click OK Click OK, then save your changes, preview the page in a browser, click the drop-down list arrow to see the choices, close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

38. Adding a Text Area Click to the right of the drop-down box you just inserted, press [Enter], type a title, then press [Shift][Enter] Double-click Text Area in the Form Controls list on the Toolbox task pane Microsoft Expression Web - Illustrated

39. Adding a Text Area Right-click the text area you just inserted, then click Form Field Properties Type comments in the Name text box Click in the initial value box, type Type comments here Save your changes, preview the page in a browser, close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

40. Adding Buttons Click to the right of the text area you inserted, then press [Enter] Double-click Input (Submit) in the Form Controls list on the Toolbox Task Pane to add a submit button as shown in the figure on the following slide Microsoft Expression Web - Illustrated

41. Adding Buttons Microsoft Expression Web - Illustrated

42. Adding Buttons Right-click the button you just inserted, then click Form Field Properties Click in the Value/label text box, select the text submit, press [Delete], type what you would like it to be called, then click OK Microsoft Expression Web - Illustrated

43. Adding Buttons Click to the right of the button you just inserted, then double-click Input (Reset) on the Toolbox Task Pane Right-click the button you just inserted, then click Form Field Properties Click in the Value/label text box, select the text reset, press [Delete], type Cancel, then click OK Microsoft Expression Web - Illustrated

44. Adding Buttons Save your changes, preview the page in a browser, then compare your screen to the figure on the following slide Fill out at least one form control, click the Cancel button, close the browser window, return to Expression Web, close the tradewinds site, then exit Expression Web Microsoft Expression Web - Illustrated

45. Adding Buttons Microsoft Expression Web - Illustrated Example of finished buttons