Table of Contents Previous Section

Create form-based dynamic HTML elements

 You need to add dynamic HTML elements to capture the guest's input. You'll do this by creating a form.

  1. Place the cursor on the line after the "My Guest Book" text and press Enter.

  2. Click the palette button on the main window to open the palette window.

    The palette window contains three different palettes from which you can choose ready-built elements. The first contains static HTML elements, the second contains form-based dynamic HTML elements, and the third contains abstract dynamic elements (objects that have no true HTML equivalent).

  3. In the palette window, click the middle icon to display the Form Elements palette.

  4. Drag a form object from the palette onto the page.

    A pre-defined form with two text fields and Submit and Reset buttons appears. This form is just a template that you can modify.

  5. Select the word "Field" in front of the first text field and type Name in its place.

  6. Select the word "Field" in front of the second text field and type E-mail in its place.

  7. Place the cursor below the text fields, and drag a multi-line text element onto the page.

  8. Click the multi-line text element once to select it, and then resize it.

  9. Choose FileSave to save the Main component.

A closer look

 You just created what look like the form elements defined in the HTML specification. However, what you've really created are several WebObjects dynamic elements: a WOForm, two WOTextFields, a WOText, a WOSubmitButton, and a WOResetButton. These dynamic elements look and act like HTML form elements but have the same programming interface as other WebObjects elements.

Notice that before you dragged the form or the multi-line text element from the palette, you had to set the cursor position. Because an HTML file is a text flow, you can't just drag an element to any point on the window. You must place the cursor where you want the element, using hard returns if necessary, and then add the element. If you have text selected when you drag, the element will replace the selection.

Table of Contents Next Section