Table of Contents Previous Section

Creating Form-Based Dynamic HTML Elements

 In this section, you'll create a form with several elements to capture input from a guest. These elements look and act like HTML form elements but are actually dynamic WebObjects elements, which enable your code to receive and manipulate the data entered by the user.

  1. To display the dynamic form elements buttons in the toolbar, choose from the Elements pop-up list.

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

  3. Click .

    WebObjects Builder adds a form element to your component. The triangle at the upper-left corner indicates that it is a dynamic form, as opposed to a static form.The gray border indicates the extent of the form. You can increase its size by adding additional elements inside it.

  4. Type the text "Name: " and press Enter.

    This text replaces the word "Form" that was displayed by default.

  5. Type "E-mail: " and press Enter twice

  6. Type "Comments: " followed by Enter.

    You have just entered three lines (and a blank line) of static text inside the form. Now you'll enter some dynamic elements to receive input from the user: two text fields and a multi-line text area.

  7. Place the cursor to the right of the text "Name: ".

  8. Click to create a dynamic text field element (WOTextField).

  9. Repeat steps 7 and 8 for "E-mail: ".

  10. Use the button to create a multi-line text area below the "Comments: " line.

  11. Press Enter twice to create two blank lines.

  12. Click to create a Submit button, which is used to send the data in the form to the server.

  13. Click to create a Reset button, which is used to clear the data in the form.

    The window should now look like this:

Table of Contents Next Section