text-fields-text-areas

custom--- title: Text field and text area widgets sidebar_label: Text fields and text areas

Text fields and text areas are form controls that users can type responses into in the web browser. They are located in the Forms section of the Default widget library.

Use a text field widget when prototyping a form field for which a short (single-line) response is expected, such as a username or password field. (These are also good for search fields.)

Use a text area widget when prototyping a form field for which a long (multi-line) response is expected, such as a feedback form.

tip

You can capture the text that users enter into text fields and text areas and pass that text to other pages in the prototype. Learn how in the Pass text to next page tutorial.

Hint text

You can add hint text (also called "placeholder text") to a text field/area using the Hint Text field in the Interactions pane. Hint text will appear in a text field/area until the user interacts with it, at which time it will disappear to allow the user to fill in the input as needed.

You can choose whether the hint text will be hidden after the text field/area has been focused or after the user starts typing. Use the Hide after dropdown to make your selection.

Hint text is grey by default and appears in the font applied to the text field/area. To change the hint text's styling, edit the Hint style effect in the Interactions pane.

Input types (text fields only)

You can give text field widgets different input types to denote their function in a user input form. Use the Input type dropdown in the Interactions pane to select the input type for a text field.

Keep in mind that web browsers often apply their own styling to certain types of text fields. In addition, when you select a text field on a mobile device, some field types will cause a different type of keyboard to appear, such as a number keypad instead of the alphanumeric keyboard.

info

Text field types are a feature of HTML, not an invention of Axure's — we're just giving you access to them. As such, you'll find that certain field types are more applicable to working in Axure RP than others.

The different types of fields and the results of using that field type are as follows:

• Text: Default setting used for basic text entry

• Password: Text is masked as it is entered

• Email: May prompt an email keyboard on mobile devices

• Number: Only accepts numeric input, may prompt a numeric keyboard on mobile devices

• Phone number: May prompt a dial pad on mobile devices

• URL: May prompt a URL-entry keyboard on mobile devices

• Search: May add a search button to keyboard on mobile devices. Some web browsers may add an "X" icon you can click to clear the field

• File: Changes the text field into a file-upload button in the web browser, which will open the device’s file browser when clicked (though it is not possible to upload a file to an Axure RP prototype)

• Date: May prompt a browser-styled date picker or calendar control

• Month: May prompt a browser-styled month and year picker

• Time: May prompt a browser-styled time picker

Tab order

Tab order for text fields, text areas, and other form widgets is determined by their layer depth, as shown in the Outline pane. You can learn more about this and how to change a widget's tab order in the organizing widgets article.

Special properties

You can access some additional properties of text field and text area widgets by clicking Show all in the Interactions pane.

Maximum length (text fields only)

You can use the Max length field in the Interactions pane to specify the maximum length of entry a text field will accept. The field will stop accepting additional text input once the maximum character length has been reached.

Disabled

Disabling a text field or text area prevents users from interacting with it in the web browser. This also activates the widget's Disabled style effect, making it appear greyed-out.

There are two ways to disable a widget:

• Check the Disabled checkbox at the bottom of the Interactions pane.

• Disable the widget dynamically in the web browser with the Enable/disable action. You can do this as part of any interaction, such as when the page loads or when a button is clicked.

tip

You can dynamically enable a disabled widget in the web browser with the Enable/disable action. Check out the Terms and Conditions tutorial for an example of how this can be done.

Read only

When you set a text field/area to "read only," the text already on the widget can be seen and selected in the web browser, but it can't be changed by the user. To set a text field/area to read only, check the Read only checkbox in the Interactions pane.

Special interactions

Capturing and evaluating the entered text

You can access the text entered in a text field or text area via the text on widget value option in actions and conditions. For example, you can set the value of a global variable to the text on a text field/area in order to carry that text over to a different page.

You can also evaluate a text field or text area's text in a condition to only execute a certain case if the text matches a particular value, as you might do when verifying a username and password combination.

Submit button

Pressing the ENTER key while a text field or text area has focus in the web browser can fire the Click or Tap event of another widget on the page, known as the text field/area's "submit button."

To assign a submit button to a text field/area:

1. Select the text field/area and click Show all in the lower section of the Interactions pane.

2. Choose from a list of eligible widgets in the Submit button dropdown.

To unassign the submit button, click Unassign submit button at the bottom of the dropdown.