The Text Box Element

The text box element represents an html input of type 'text', 'password', 'hidden', or 'file' and is used to request short strings of text from a form user:


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

Then edit the attributes for the text box

and click the 'Create' button.

ID

ID is the document object model identifier for the text box. 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 box. 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 box a name of "city" and a user enters the text "Dallas" into the text box, 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 box, telling the form user what information you want entered in the text box. 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 box by clicking on the text box itself, or on the text of the label also.

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

Type

Type represents the intended purpose of this text box (what the form should do with the information a form user enters here).

The default is 'Text' which simply sends the text a user enters on to your form processing script.

'Password' is identical to Text, except that when a user is typing into the text box, the actual characters he or she is typing are obscured (represented by an asterisk (*) character) so no passers by can see what the user enters.

'Hidden' represents a text box that is hidden from, and not meant to be used by someone completing the form. Hidden text boxes typically contain data you want to be submitted with the form, but that you don't want the user to be able to modify (or see). Things like the name of the page the form is on, a user id number, or values passed in from a previous page in a multi-page form are typical hidden text box values.

'File' is a special type of text box that allows a user to select a file from their local machine for uploading to your server. Be sure to check the documentation for the scripting language you're using to handle file uploads as there may be other values you'll want to specify (as hidden input elements) in your form as well.

Initial Value

This is the initial value you want to appear in the text box 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 box, you might set the Initial Value to MM/DD/YYYY indicating the format in which you want the date.

Max Length

Max Length is used to limit the total number of characters a user is able to type into the text box. 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 box and, if the user enters more text than will physically fit in the text box but still has not reached the Max Length value set here, the text box 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 box 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 box in your form's tabbing order.

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

If Tab Order is set to a negative number, this text box 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 box being selected in the position you enter here.

Accept (MIME)

Accept is only used for file upload text boxes and allows you to specify what type(s) of files a user is allowed to upload using this text box. Enter a comma-separated list of the allowed content types (MIME types) and most browsers will filter out files that are of a type not in the list you specify here.

For example, specify a list of image/gif, image/jpg to only allow uploads of image files in the .gif or .jpg format.

Make sure to check the documentation for your server software to learn it's list of valid MIME types and always verify MIME types in your form processing script to catch any improper files the user's browser (or other user agent) didn't filter out.

Title

The title attribute offers advisory information about the text box 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 box) 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 box. Additionally, a disabled text box 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 box. However, unlike a disabled text box, a text box 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 Box

The "Edit Text Box" form is the same as the "Add New Text Box" 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 box can be found below the 'Save' button:

Click this link to permanently delete the text box.