Macromedia Dreamweaver MX 2004

Transcription

1 Forms - Creating HTML Forms A form gives your viewers the opportunity to send you information. You can design forms to let viewers sign up for a newsletter, make purchases, and complete a questionnaire. To design a form: 1. Insert the Form icon onto a web page to create a form element. The form element tells the browser that the page is a form and specifies the location of the script that processes the viewer s data. The form element contains all the other elements of your design. 2. Add a table or tables to your page to provide the form s structural foundation. Tables help you arrange the form fields more easily and give you more predictable results across the different browsers and operating systems. 3. Add form elements by inserting them into the table cells. The form elements become the fields your viewers will use to enter and post information. The Property Inspectors let you customize the fields and the way they will look in the form. 4. Add a submit button so your viewers can submit their data to the server. 5. Preview your form in a browser. Form elements can be inserted using the Insert > Form menu or from the Forms category of the insert bar. Form Icon Hidden Field Checkbox Radio Group Jump Menu Text Field Textarea Radio Button List/Menu Image Field Button Macromedia Dreamweaver

2 Forms - Form Icon & Hidden Fields The form element identifies the current web page or section of a web page as a form and instructs the browser where and how to return form information for processing. The content of your form must be contained in the box that surrounds the Form icon in the document window. If you are using an HTML table to design your form, be sure to put the Table icon in the box that surrounds the Form icon in the document window. The form element must precede any other form elements. In Dreamweaver, forms are indicated by a dotted red outline. To set up the form to work on the Delta server: 1. Drag the Form icon from the Forms set in the Objects palette, or double-click the icon. 2. In the Form Inspector type a unique form name in the Name/ID text box. A unique name is especially important if you have more than one form on your page. 3. You create the form in Dreamweaver, but your web server actually processes the information using a CGI script. In the Action text box, type the file name of the CGI script where the information will be sent when the viewer clicks the Submit button. For the Delta server, the script is located at: 4. Select an encoding method from the Encode pop-up menu. Leave this blank for the Delta server. 6. In the Method pop-up menu, determine how the form information will be sent. For the Delta server use default. A Hidden Field is an HTML tag that does not display when you view the form in the browser. However, the form submits the HTML tag values with the rest of the form data. To set up a hidden tag: 1. Insert the Hidden Field icon on your table. 2. In the Inspector, enter a unique name in the Name text box. 3. Enter a value for the Hidden tag in the Value text box. To have the form work on the Delta server, you need to insert three hidden fields. recipient - contains the Delta address of the person receiving the submitted form redirect - contains the entire url of the page the user should be sent to after they submit the form (usually some type of thank you or confirmation) - contains an address. Macromedia Dreamweaver

3 Form Objects - Text Field & Textarea You can create text fields and text areas on your Web page form. The text field lets viewers enter a single line of text. The text area field lets viewers enter multiple lines of text. When a viewer clicks the Submit button, the form passes the text to the CGI script. To create a text field: 1. Add Text Field icon to your form and set the options in the TextField Property Inspector. In the first text box, type a unique name to identify the text field. In the Char width text box, type the number of characters to be visible in the text field. In the Max Chars text box, type in the maximum number of characters accepted by the text field before truncation occurs. The default is to leave it empty. If empty, this limit is determined by the Web browser used to view the form. In the Init val text box, type default text that can be overwritten by viewers, or leave the text box empty. To create a text area: 1. Add the Text Area icon to your form, and set the options in the Text Area Property Inspector: In the first text box, type a unique name to identify the text area. In the Char width text box, type the number of characters to determine the width of the visible text area. In the Num Lines text box, type the number of rows to determine the maximum number of rows visible in the text area. 2. Choose the appropriate option from the Wrap pop-up menu to control line breaks: Default prevents text from wrapping to the next line. When the user s input exceeds the right boundary of the text area, text will scroll to the left. Virtual wraps the text on-screen, but not when the data is processed. Physical wraps the text on-screen, and when it s processed. 3. If necessary, in the Init val text box, type in default text that the viewer can overwrite. Macromedia Dreamweaver

4 Form Objects - Checkbox & Radio Button The Check Box lets the viewer select more than one item from a list of options. For example: courses they have taken, hobby in which they are interested. Each check box must have a value and a unique name. Check boxes are not part of a group. To create a check box: 1. Add the Check Box icon to your form and set the options in the Check Box Property Inspector: In the first text box, type a unique name to identify the check box. In the Checked value text box, type the value for the check box. When a viewer clicks the Submit button in the form, this value will be passed to the CGI script if the viewer selects the check box. Select Initial state - Checked to make the check box appear selected by default. Radio buttons let viewers select one item from a group. For example: gender, marital status, an option on an evaluation form. To make sure that the selection works properly, create logical groups of complementary radio buttons. Radio buttons that make up a group must share a group name and have individual values. To create a Radio Button: 1. Add the Radio Button icon to your form and set the options in the Radio Button Property Inspector: In the first text box, type a group name. In the Checked value text box, type a value or a descriptive name for the radio button that identifies it within the group. When a viewer clicks the Submit button in the form, this value is passed to the CGI script if the viewer selects the radio button. Select Initial state - Checked to make the radio button appear selected by default. Macromedia Dreamweaver

5 Form Objects - List/Menu An HTML form list lets a user select one or more than one item from a list. The user holds down Shift to select more than one item. A menu lets a user select only one item. List/Menus are useful when you have a limited amount of space, but need to display many items. The list/menu must have a name and each item must have a label and a value. The label is seen on the form and the value is what is sent. The label and the value may match or may be different. To set up a list box or a pop-up menu: 1. Add the List/Menu icon to your form, and set the options in the List/Menu Property Inspector. In the first text box, type in a unique name to identify the list box or pop-up menu. Type indicates whether the menu drops down when clicked (the Menu option) or displays a scrollable list of items (the List option). Select the Menu option if you want only one option to be visible when the form is displayed in a browser. To display the other choices, the user must click the down arrow. Select the List option if you want to list some or all the options when the form is displayed in a browser, as in the following illustration, or if you want to let users select multiple items. Height (List type only) sets the number of items displayed in the menu. Selections (List type only) indicates whether the user can select multiple items from the list. List Values opens a dialog box that lets you add items to the menu Initially Selected sets the items selected in the list by default. Click the item or items in the list. 2. In the List Values dialog box: Type in a Label that will appear on the web page and a Value that will be returned to you when the form is processed. Use the Plus and Minus buttons to add and remove radio buttons from the group. Click the up and down arrows to reorder the group. Macromedia Dreamweaver

6 Form Objects - Buttons Buttons perform actions when clicked. The actions to submit the information on the form or to reset the form to its default values are already set-up. Additional actions can be created using JavaScript. To create a Submit or Reset button: 1. Add the Button icon to your form. 2. Type in a Label that will appear on the button. For example: Click to send in the information. 3. Select one of the default actions: Submit form or Reset form. You can use graphics as buttons. Using an image to do anything other than submitting the form requires writing additional JavaScript. To use an image as a Submit button: 1. Add an Image Field to your form. 2. In the Image Source dialog box, select the image you want to use for the submit button. 3. In the Image Field Property Inspector, type Submit in the Image Field text box. Macromedia Dreamweaver

7 Jump Menu A jump menu is a pop-up menu in a document, visible to your site visitors, listing options that link to documents or files. By choosing an item from the list, the user is redirected (or jumps ) to the specified URL. You can create links to documents in your web site, links to documents on other web sites, links, links to graphics, or links to any file type that can be opened in a browser. A jump menu can contain three basic components: (Optional) A menu selection prompt, such as a category description for the menu items, or instructions, such as Choose one: (Required) A list of linked menu items: a user selects an option and a linked document or file opens. (Optional) A Go button. To insert a jump menu: 1. Add a Jump Menu button to your page. You do not have to insert a form icon first, one will be added around the jump menu. 2. Enter the information into the Insert Jump Menu dialog box. a. Click the Plus (+) button to add a menu item. Click the button again to add additional menu items. Select a menu item and click the Minus (-) button to remove an item. b. Select a menu item, and then use the arrow keys to move it up or down in the list. c. In the Text text box, type the text you want to appear in the menu list for a menu item. To use a menu selection prompt, such as Choose One, enter your selection text in the Text text box for the first menu item. d. In the When Selected Go To URL text box, click the folder icon to browse to the file to open, or type the file path in the text box. e. In the Open URLs In popup menu, select a location in which to open the file: Main Window opens the file in the same window. Frame opens the file in the frame you select. f. In the Menu Name text box, type a name for the menu item. g. Under Options, select Insert Go Button After Menu to add a Go button instead of a menu selection prompt. If you use the Go button, you will need to insert a Jump Menu Go behavior. h. Under Options, select Select First Item After URL Change if you use a menu selection prompt (such as Choose One). i. Click OK. Macromedia Dreamweaver