• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 11. Creating Forms > Adding Multi-Line Text Fields

Adding Multi-Line Text Fields

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

1.
In the lights_quiz.html document, type Describe how a Fresnel lens works: in the left cell of row 4 and press Tab twice.

The multi-line text field will be inserted in same column as the single-line text fields from the previous exercise.

2.
Click the Text area icon on the Forms tab of the Insert bar.

TIP

You can also insert a multi-line text field by choosing Insert > Form Objects > Textarea.

A multi-line text field is placed in the form and the Property inspector shows Text Field properties.

TIP

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

3.
In the Name text field on the Property inspector, replace textfield with fresnel. In the Char Width text field, type 40.

When you use multi-line text fields, you will see an additional option on the Property inspector. The Wrap drop-down menu is only available for multi-line text fields. It is grayed-out for both single-line and password text fields. Wrap specifies how text that is typed into a multi-line field is displayed if there is more text than will fit in the visible area.

The options are Default, Off, Virtual, and Physical. You can leave it set to Default for this exercise.

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

  • Off will stop text from wrapping to the next line. Text will continue on one line until the Return key is pressed.

  • Virtual will wrap text to the next line, but wrap will not be applied to the data when it is submitted.

  • Physical will wrap text to the next line, and wrap will be applied to the data when it is submitted.

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

This option dictates how many lines will appear in the scrollable area. It does not limit the number of lines users can enter.

5.
In row 5, type What is your favorite lighthouse and why? in the left cell and insert a multi-line text field into the right cell. Name the field favorite and apply the same attributes that you set for the previous multi-line text area in steps 3 and 4.

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

6.
Save the file and preview it in the browser.

Leave this file open for the next exercise.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint