The Text Area Element

The text area element represents an html textarea and is used to request long strings of text from a form user:


Create a text area by clicking 'Text Area' under the Form Elements heading in the 'Add New Element' menu:

Then edit the attributes for the text area

and click the 'Create' button.

ID

ID is the document object model identifier for the text area. The important thing to remember about any id you assign is to make it unique among all the elements in the form. The editor will remind you if you try to assign a duplicate id to any element.

Name

Name is the identifier applied to the text a form user enters in the text area. When the form is sent to your form processing script, you'll use this name to access what the user entered in this field.

For example, if you give a text area a name of "city" and a user enters the text "Dallas" into the text area, the string city=Dallas would be passed to your form processing script.

The ID attribute and the Name attribute can (and often do) have the same value. In the administration pane of formArchitect, you can tell the editor to automatically assign whatever you enter as ID to Name as well.

Whether you copy the ID attribute to Name or not, you should be sure to assign a unique value for name to each field in the form you want passed to your form processing script.

Label

Label represents an html label element that serves as a caption for the text area, telling the form user what information you want entered in the text area. Enter the text of the label here, or leave it blank if you don't want a label assigned.

One of the useful features of the label is that a form user can give focus to the text area by clicking on the text area itself, or on the text of the label also.

The label doesn't have a fixed position in relation to the text area (like the relationship between a fieldset and a legend) and can be moved above, below, or to either side of the text area in the presentation pane of formArchitect.

Initial Value

This is the initial value you want to appear in the text area when the form is loaded on your web page. A form user will be able to overwrite this value and it's typically used to guide a user as to the type or format of the information you want entered.

For example, if you want a date entered in a text area, you might set the Initial Value to MM/DD/YYYY indicating the format in which you want the date.

Rows

Rows represents the number of visible lines of text for this text area. If a user enters more lines than there are rows, a scroll bar will appear to allow additional input:

Note that browsers display text areas differently. Opera and Internet Explorer display a disabled scroll bar for input that fits in the visible area and an active scroll bar when neeeded:

while Firefox displays a scoll bar only when needed:

Also note that Firefox displays an additional row for the same value of the Rows attribute when compared to Opera and Internet Explorer (rows was set to 2 for all of the above screenshots).

Max Length

Max Length is used to limit the total number of characters a user is able to type into the text area. You may enter that number here or leave Max Length blank to allow an unlimited number of characters as input.

Max Length has no relation to the physical dimensions of the text area and, if the user enters more text than will physically fit in the text area but still has not reached the Max Length value set here, the text area will scroll to accept further input.

Access Key

Access Key allows you to specify a character that will allow a user to select the text area without using the mouse or another pointing device. The actual key combinations (shift-[key], alt-[key], etc.) vary by browser.

Although designed to make forms more accessible to those unable to use a mouse, this attribute can cause conflicts with other assistive technology (like screen readers) and is poorly implemented at best. I've included it here for completeness, but be sure to research the implications of specifying an Access Key before doing so.

Tab Order

By using the 'tab' key on their keyboard, a user can cycle through and access all the elements in your form without using the mouse to select them. Tab Order allows you to specify the position of the text area in your form's tabbing order.

If this attribute is left blank (or set to 0), this text area will be placed in the tabbing order as it appears in the form.

If Tab Order is set to a negative number, this text area will be removed from the tabbing order.

If set to a positive number, elements in the form will be selected in increasing Tab Order with this text area being selected in the position you enter here.

Title

The title attribute offers advisory information about the text area and is displayed in various ways depending on the browser in use. Visual browsers may display Title as a 'tool tip' (appears when the mouse pauses over the text area) whereas audio browsers may speak the Title.

Disabled

When Disabled is set to 'yes', a user will be unable to enter text into the text area. Additionally, a disabled text area cannot receive focus, will be skipped in tabbed navigation, and it's contents will not be sent to your form processing script.

Read Only

When Read Only is set to 'yes', a user will be unable to modify the text in the text area. However, unlike a disabled text area, a text area set to read only can receive focus, will appear in tabbed navigation, and it's contents will be sent to your form processing script.

Editing / Deleting a Text Area

The "Edit Text Area" form is the same as the "Add New Text Area" form with two exceptions.

First, the current values for each attribute are filled in. Edit these attributes as you wish then click the 'Save' button at the bottom of the form to save your changes.

Additionally, a link to delete the text area can be found below the 'Save' button:

Click this link to permanently delete the text area.

Other Attributes

Due to the nature of the formArchitect editor, not all attributes of each form element are user-editable and are instead implemented transparently as you create and edit your form.

Cols

Cols specifies the visible width in average character widths (typically 16px) of the textarea. Text area width is instead handled like other form element widths and can be modified in the presentation pane.