Dreamweaver MX Overview of Templates n n Forms

Dreamweaver MX

Overview of Templates n n Forms enable you to collect data from ______. A form contains ____ such as text fields, radio buttons, check boxes, menus, or lists. Form data are usually sent to a database, an email address or an _______ for processing. _____ (Common _____ Interface) scripts are often used to process form data. 2

Building Your Form (p. 336) n n n In a web page, position the cursor where you want the form, select the Forms tab on the Insert bar, click the Form icon. Select the form by clicking the red dotted line. Form information is now in the Property inspector. – Forms may be given a name. – An action (such as a CGI script) is specified for processing. – A method for handling the data is also specified (_______ is best). – Target for output and _____ type also available. 3

Single-Line Text Fields (p. 342) n n n You may wish to insert a _____ in the form and format the table to hold labels and form fields. Type a _____ (to describe the field to the user). To insert a text field, position the cursor in the form, click the Text Field icon on the _______ tab of the Insert bar. Click on the text field to change its properties in the Property inspector. Give the text field a Name, a Char Width, Max Chars. You can supply text that will appear in the text 4 field in _______, but be careful.

Multi-Line Text Fields (p. 345) n n n To insert a text area field, position the cursor in the _______. Click the Textarea icon on the Forms tab of the Insert bar. Specify the name, Char Width, Num Lines, and Wrap (how text wraps within the text area). – – Browser default Off (no wrapping) Virtual (appears to wrap, but sent with no wrapping) Physical (sent with wrapping characters) 5

Check Boxes (p. 347) n n n Type the desired label(s). Place the cursor in the form and click the Checkbox icon. Select the check box. In the Property inspector, provide a name for the field. In the Checked Value field, enter “yes” or some other value such as “ 1” (this is the data sent if the box is checked). Ordinarily, the Initial State of a check box would be ______. 6

Radio Buttons (p. 349) n n n n Type the desired label(s). Place the cursor in the form and click the Radio Group icon. In the dialog box, give the radio button group a name. Change the labels and values shown in the box to meet your needs. To add or remove a label, click + or -. To change the order, use the up or down buttons. For the _______ of the buttons, use line breaks 7 or table (Dreamweaver creates a table for you).

List/Menu Items (p. 351) n n n n For a list, position the cursor in the form, click the List/Menu icon. Give the list a name. Select List for the Type option. Set the value of Height (values initially visible). Check the Allow multiple box if the user is allowed to select more than one option. Click the List Values button in the Property inspector. Add labels and values. 8

Adding Buttons (p. 354) n n n Forms usually have a Submit button and a _______ button. Position the cursor in the form. Click the Button icon to insert a Submit button. Position the cursor and click the Button icon again. Change the Action to Reset form. The button name can be changed to Reset. The _______ for any button (the text that appears on the button) can also be changed if needed. 9

Validating Forms (p. 356) n n n What the user enters in text fields can be validated. Select a text field. In the Behaviors panel in the Design panel group, click the + sign. Select ______ from the menu. Check the appropriate boxes (such as Required), click OK. The above can also be done for the Submit button (select all fields that are required). 10

Testing Forms (p. 358) n n n Select the form by clicking on the red dotted line. In the Property inspector, enter mailto: <your email address> in the Action field. Select the POST method. In the Enctype text field, enter _____. Save the file and test it in the browser. 11

Jump Menus (p. 360) n n n n Place the cursor anywhere in a web page. Click the Jump Menu icon to insert a Jump Menu. Add a label in the Text field. Enter a # in the URL field. Click the Select First Item… option. Add additional labels and browse to pages in the site for these. Click OK. The user is sent to the URL chosen. 12