Adding Multiline Text Fields


You can use multiline text fields to collect larger amounts of information from a user by providing a text area with multiple lines in which the visitor can type. Typical multiline text fields collect comments and feedback from visitors. In this exercise, you will place a multiline text field in the table inside the form.

1.

Place the insertion point anywhere inside the text below the list control. Use the tag selector to select the <label> tag, press the right arrow key once, and press Return (Macintosh) or Enter (Windows).

The insertion point is now where it should be: inside the fieldset but outside of the list control.

2.

In the Forms category on the Insert bar, click the Textarea button.

Tip

You can also insert a multiline text field by choosing Insert > Form > Textarea.

The Input Tag Accessibility Attributes dialog box opens. In Dreamweaver, a multiline text field is known as a textarea.

3.

In the Label text field, type Have you had any teaching experience in general? Please describe. Wrap with label tag should be selected in the Style section and Before form item should be selected in the Position section. Leave the remaining fields blank and click OK.

The multiline text field and its corresponding label text appear in the Document window.

4.

Place a line break between the label text and the multiline text field. Select the multiline text field.

Tip

To place a line break directly between the label and the text field, select the text field and press the left arrow key once; then insert the line break.

The Property inspector shows Text Field properties because the multiline text field is selected.

Note

You can convert a single-line text field to a multiline text area by selecting the text field and choosing Multi line in the Type option on the Property inspector.

5.

In the Name text field on the Property inspector, replace textarea with teachingExp. In the Char Width text field, enter 40.

When you use multiline text fields, you see an additional option on the Property inspector. The Wrap menu is available only for multiline text fields. It is dimmed for both single-line and password text fields. Wrap specifies how text that is typed into a multiline field is displayed if there is more text than will fit in the visible area. Leave the Wrap option set to Default for this exercise.

The Wrap options are Default, Off, Virtual, and Physical:

  • Default uses the browser default. This option is selected automatically when you select Multi line for the Type option.

  • Off stops text from wrapping to the next line. Text continues on one line until the Return or Enter key is pressed. The text scrolls to the left as the visitor types beyond the limit of the visible area.

  • Virtual wraps text to the next line, but wrap is not applied to the data when the form is submitted.

  • Physical wraps text to the next line, and wrap is applied to the data when the form is submitted.

6.

Type 4 in the Num Lines text field on the Property inspector.

This option dictates how many lines appear in the scrollable area. It does not limit the number of lines users can enter. The text will scroll upward as the user types beyond the number that is set to display.

7.

Place the insertion point on the multiline text field and select the <label> tag in the tag selector. Press the right arrow key once and press Return (Macintosh) or Enter (Windows). Repeat Steps 2 through 6 to create a second text area. Use What do you want to gain from this program? If you have specific goals or areas of interest that you would like to explore, please explain. Please be specific. for the label; the other accessibility attributes should be the same as those in Step 3. Name the field gain and apply the same attributes that you set for the previous multiline text area in Steps 5 and 6.

Your document should now look similar to the example shown here.

8.

Preview the page in the browser and test the list by selecting multiple options.

Save the training.html document and leave it open for the next exercise.




Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net