microsoft expression web-illustrated unit j: creating forms
TRANSCRIPT
![Page 1: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/1.jpg)
Microsoft Expression Web-IllustratedMicrosoft Expression Web-Illustrated
Unit J:Unit J:Creating FormsCreating Forms
![Page 2: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/2.jpg)
ObjectivesObjectives
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
![Page 3: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/3.jpg)
ObjectivesObjectives
Add checkboxes
Add a drop-down box
Add a text area
Add buttons
Microsoft Expression Web - Illustrated
![Page 4: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/4.jpg)
Understanding Forms andUnderstanding Forms andForm ControlsForm 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
![Page 5: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/5.jpg)
Understanding Forms andUnderstanding Forms andForm ControlsForm 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
![Page 6: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/6.jpg)
Understanding Forms andUnderstanding Forms andForm ControlsForm Controls
Microsoft Expression Web - Illustrated
![Page 7: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/7.jpg)
Understanding Forms andUnderstanding Forms andForm ControlsForm Controls
Microsoft Expression Web - Illustrated
Sample Sample FormForm
![Page 8: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/8.jpg)
Adding a Form to a Web PageAdding 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
![Page 9: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/9.jpg)
Adding a Form to a Web PageAdding 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
![Page 10: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/10.jpg)
Adding a Form to a Web PageAdding a Form to a Web Page
Microsoft Expression Web - Illustrated
![Page 11: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/11.jpg)
Adding a Form to a Web PageAdding 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
![Page 12: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/12.jpg)
Grouping Form ControlsGrouping 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
![Page 13: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/13.jpg)
Grouping Form ControlsGrouping Form Controls
Microsoft Expression Web - Illustrated
![Page 14: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/14.jpg)
Grouping Form ControlsGrouping Form Controls
Press , then double-click Group Box on the Toolbox task pane
Microsoft Expression Web - Illustrated
![Page 15: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/15.jpg)
Grouping Form ControlsGrouping 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
![Page 16: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/16.jpg)
Grouping Form ControlsGrouping Form Controls
Save your changes, preview the page in a browser, close the browser window, then return to Expression Web
Microsoft Expression Web - Illustrated
![Page 17: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/17.jpg)
Adding a Text BoxAdding 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
![Page 18: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/18.jpg)
Adding a Text BoxAdding 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
![Page 19: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/19.jpg)
Adding a Text BoxAdding a Text Box
Microsoft Expression Web - Illustrated
![Page 20: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/20.jpg)
Adding a Text BoxAdding 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
![Page 21: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/21.jpg)
Adding a Text BoxAdding 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
![Page 22: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/22.jpg)
Adding Radio ButtonsAdding 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
![Page 23: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/23.jpg)
Adding Radio ButtonsAdding 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
![Page 24: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/24.jpg)
Adding Radio ButtonsAdding Radio Buttons
Click to the right of the radio button you just inserted, type the title, then press [Shift][Enter]
Microsoft Expression Web - Illustrated
![Page 25: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/25.jpg)
Adding Radio ButtonsAdding 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
![Page 26: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/26.jpg)
Adding CheckboxesAdding 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
![Page 27: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/27.jpg)
Adding CheckboxesAdding 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
![Page 28: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/28.jpg)
Adding CheckboxesAdding Checkboxes
Microsoft Expression Web - Illustrated
Completed Check Box Properties dialog box
![Page 29: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/29.jpg)
Adding CheckboxesAdding 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
![Page 30: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/30.jpg)
Adding CheckboxesAdding 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
![Page 31: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/31.jpg)
Adding CheckboxesAdding 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
![Page 32: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/32.jpg)
Adding a Drop-Down BoxAdding 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
![Page 33: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/33.jpg)
Adding a Drop-Down BoxAdding a Drop-Down Box
Microsoft Expression Web - Illustrated
![Page 34: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/34.jpg)
Adding a Drop-Down BoxAdding 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
![Page 35: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/35.jpg)
Adding a Drop-Down BoxAdding 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
![Page 36: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/36.jpg)
Adding a Drop-Down BoxAdding a Drop-Down Box
Microsoft Expression Web - Illustrated
Add Choice dialog box with 2 choices added
![Page 37: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/37.jpg)
Adding a Drop-Down BoxAdding 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
![Page 38: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/38.jpg)
Adding a Text AreaAdding 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
![Page 39: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/39.jpg)
Adding a Text AreaAdding 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
![Page 40: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/40.jpg)
Adding ButtonsAdding 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
![Page 41: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/41.jpg)
Adding ButtonsAdding Buttons
Microsoft Expression Web - Illustrated
![Page 42: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/42.jpg)
Adding ButtonsAdding 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
![Page 43: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/43.jpg)
Adding ButtonsAdding 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
![Page 44: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/44.jpg)
Adding ButtonsAdding 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
![Page 45: Microsoft Expression Web-Illustrated Unit J: Creating Forms](https://reader036.vdocuments.site/reader036/viewer/2022062404/551a765855034643688b52a7/html5/thumbnails/45.jpg)
Adding ButtonsAdding Buttons
Microsoft Expression Web - Illustrated
Example of finished buttons