This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Forms: Working with Text Fields and Text Areas

Text form fields allow users to type in information. There are two kinds of text form fields: text fields and text areas. Text fields are used for small amounts of text input; text areas are used for multiple lines of input.

In order to use a text form field, two processes must be completed: inserting the text form field into the form and assigning a name and initial value.

NOTE: For more information about working with form fields, please refer to Inserting the First Form Field, Opening the Form Field Properties Dialog Box, and Terminology.

return to topText Fields

Text fields are used for small amounts of text input. In order to use a text field, two processes must be completed: inserting a text field and assigning a field name.

Inserting a Text Field

  1. Place the insertion point within the form boundary where you would like to insert the form field
    NOTE: For information on inserting a form boundary, refer to Creating Forms.

  1. From the Insert menu, select Form » Text Field
    OR
    From the Insert bar, in the Forms tab, click TEXT FIELDText Field button
    The Input Tag Accessibility Attributes dialog box appears.
    For a description of the options in this dialog box, refer to Forms: Input Tag Accessibility Options.
    Input Tag Accessibility Attributes dialog box

  2. Type any desired text before or after the text field

  3. Proceed with Assigning the Name and Initial Value

Assigning the Name and Initial Value

The name for a text field should indicate what type of information you are prompting the user for or identify what question you were asking (e.g., a text field requesting a user's name may have the name "username" which will correspond to the value of the text field: the user's name).

initial display example after data entry example

When a user submits the form, the information the user entered in the text field will be matched with the name of that text field. The information the form developer receives may look like this:

name: value
EXAMPLE: username: George Costanza

Therefore, the name username identifies what question was being asked and the value indicates what the user answered for the particular question.

To assign the Name and Initial Value:

  1. Insert a text field

  2. Select the text field
    The TextField Properties pane appears.
    Text field properties pane

  1. In the TextField text box, type the name for your text field
    EXAMPLE: username

  2. OPTIONAL: In the Init Val text box, type an initial value for the text field
    NOTE: The initial value of a text field is visible to users and will appear to the users in the text field when the page is loaded. This text can be used to indicate the type of format you would like from a user.
    EXAMPLE: A text field prompting users to enter their names may have the initial text "Last Name, First Name."

  3. In the Char Width text box, type a width for the text field
    NOTE: This width does not indicate how many characters users can enter into the text field; it indicates how many characters wide the text field will appear on the screen.

  4. In the Max Chars text box, type the maximum number of characters users are allowed to type

  5. OPTIONAL: If the text field is going to be used for a password field, from the Type section, select Password

return to topText Areas

Text areas are used for multiple lines of input. In order to use a text area, two processes must be completed: inserting a text area and assigning a field name.

Inserting a Text Area

  1. Place your insertion point within the form boundary where you would like to insert the form field
    NOTE: For information on inserting a form boundary, refer to Creating Forms.

  2. From the Insert menu, select Form » Textarea
    OR
    From the Insert bar, in the Forms tab, click TEXTAREATextarea button
    The Input Tag Accessibility Attributes dialog box appears.
    For a description of the options in this dialog box, refer to Forms: Input Tag Accessibility Options.
    Input Tag Accessibility Attributes dialog box

  3. Type any desired text before or after the text area

  4. Proceed with Assigning the Name and Initial Value

Assigning the Name and Initial Value

The name for the text area should indicate what type of information you are prompting the user for, or identify what question you are asking. For example, a text area prompting users to enter a description of their qualifications may have the name "qualifications," which will correspond to the value of the text field, the user's entered qualifications.

initial display example after data entry example

When a user submits the form, the user-supplied value of the text area will be matched with the name of the text area. The information the form developer receives may look like this:

name: value
EXAMPLE: qualifications: BS Degree from UW-Eau Claire

Therefore, the name qualifications identifies what question was being asked and the value indicates what the user answered for the particular question.

To assign the Name and Initial Value:

  1. Insert a text area

  2. Select the text area
    The Text Area Properties pane appears.
    Text area properties pane

  1. In the TextField text box, type a name for the text area

  1. OPTIONAL: In the Init Val text area, type the initial value for the text area
    NOTE: The initial value of the text area is visible to users and appears in the text field when the page is loaded; this text should indicate the type of response you would like from a user.
    EXAMPLE: A text area prompting users to enter a description of their qualifications may have the initial text "qualifications."

  1. In the Char Width text box, type a width for the text field
    NOTE: This width does not indicate how many characters users can enter into the text field, it indicates how many characters wide the text field will appear on the screen.

  2. In the Num Lines text box, type the height for the text field
    HINT: This does not reflect how much the user can type in the text area, only the height of the text field on the screen.

Wrapping Text in Text Areas

When users complete a text area, the text will not always automatically wrap. Wrapping is the term for forcing the text to fall into shape inside a given area, in this case the text area. If wrapping is not on, the text will continue in a straight line past the edge of the text area.This can be disconcerting to the user. To force the wrap for all users,

  1. Select the text area by clicking it once
    The TextField Properties pane appears.
    Text area properties pane

  2. From the Wrap pull-down list, select Virtual
    NOTE: This forces the text to wrap to the next line when the user’s input exceeds the right boundary of the text area.

Excellence. Our Measure. Our Motto. Our Goal.