Microsoft Expression Web-Illustrated Unit J: Creating Forms.

Microsoft Expression Web-IllustratedMicrosoft Expression Web-Illustrated

Unit J:Unit J:Creating FormsCreating Forms

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

ObjectivesObjectives

Add checkboxes

Add a drop-down box

Add a text area

Add buttons

Microsoft Expression Web - Illustrated

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

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

Understanding Forms andUnderstanding Forms andForm ControlsForm Controls

Microsoft Expression Web - Illustrated

Understanding Forms andUnderstanding Forms andForm ControlsForm Controls

Microsoft Expression Web - Illustrated

Sample Sample FormForm

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

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

Adding a Form to a Web PageAdding a Form to a Web Page

Microsoft Expression Web - Illustrated

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

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

Grouping Form ControlsGrouping Form Controls

Microsoft Expression Web - Illustrated

Grouping Form ControlsGrouping Form Controls

Press , then double-click Group Box on the Toolbox task pane

Microsoft Expression Web - Illustrated

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

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

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

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

Adding a Text BoxAdding a Text Box

Microsoft Expression Web - Illustrated

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

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

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

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

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

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

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

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

Adding CheckboxesAdding Checkboxes

Microsoft Expression Web - Illustrated

Completed Check Box Properties dialog box

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

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

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

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

Adding a Drop-Down BoxAdding a Drop-Down Box

Microsoft Expression Web - Illustrated

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

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

Adding a Drop-Down BoxAdding a Drop-Down Box

Microsoft Expression Web - Illustrated

Add Choice dialog box with 2 choices added

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

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

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

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

Adding ButtonsAdding Buttons

Microsoft Expression Web - Illustrated

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

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

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

Adding ButtonsAdding Buttons

Microsoft Expression Web - Illustrated

Example of finished buttons