Edit control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Edit control

Edit control overview
Create an "Edit" control
Main features of the "General" tab
Type of an Edit control
Types and masks
Specific HTML 5 features
Main features of the "UI" tab
Initial state
Parameters
Validation of Edit controls via the Enter key
Main features of the "Details" tab
Main features of the "Help" tab
Displaying a hint text in an Edit control
Main features of the "Style" tab
Edit control style
Converting an Edit control to a Static Text control

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Edit control

Edit control overview

The Edit control allows users to enter data. This control can also be used to view information.

Create an "Edit" control

To create an "Edit" control:

On the "Creation" tab, in the "Usual controls" group, click .
Click where you want to create the control in the window or page. The control appears in the editor.

Note: You can also expand "Edit" to choose an Edit control from a list of preset controls. The list of available controls is displayed with the project skin template. Simply click the control you want to create in the editor.

To view the control characteristics, select "Description" in the context menu.

Report editor: You can also create an Edit control in a report. For more details, see Input in reports.

Main features of the "General" tab

Type of an Edit control

The format of an Edit control depends on the type of information displayed or entered. The following types of edit controls can be created:

Text to display or enter a string (name, address, etc.).
Multiline text to display or enter several lines separated by a "Carriage Return".
HTML text to enter and format rich text.
Password: when typing information, all characters will be replaced with asterisks on the screen.
Numeric to display or enter a numeric value (weight, etc.). The "+++" characters are displayed if the control is not large enough to display the entire number.
Currency to display or enter monetary values.
Currency + Euro to manage prices for example
Date to display or enter dates.
Time to enter or display times.
Duration to enter or display durations.
Text tokens to manage an input with tokens.
Upload to manage file uploads.
Warning
This type of Edit control is kept for compatibility. It is recommended to use the Upload control.

Types and masks

Input masks: A large number of input masks is available for each type of Edit control.
Input masks support multiple languages. You can set different input masks according to the project language. For more details, see Multiple languages in the controls.
These input masks can be modified programmatically with the InputMask property.

Specific HTML 5 features

Some characteristics of Edit controls use HTML 5 features:

Input masks. By choosing an HTML 5 input mask, the site lets the browser handle and check the input. It is not the page (the site) that performs the checks, but the browser itself. In any case, you can run WLanguage code when exiting a control, which allows for additional checks on the data entered. These features are only available from certain browser versions: Firefox 5, Chrome 12, Opera 11, Safari 5, etc.
For more details, see the help about the input masks of text, numeric, date and time controls.
HTML 5 search control: If this option is selected for a text control, the browser will display an "X" on the right of the control. This X allows the user to clear the control content.
This option is available in the "General" tab of the control description window.
Note: This option is only available on browsers that support HTML 5, such as Chrome 12 and Safari 5.
Autocomplete: This option (located in the "Details" tab of the Edit control description window) enables or disables the autocomplete feature on Edit controls. Automatic completion is enabled by default. When the user starts typing information in a form, all the page controls are immediately and automatically filled with the data previously typed on this computer.
Autocomplete is a dangerous feature. It must be disabled when processing confidential data.
Most browsers that support HTML 5 (Firefox, Chrome, Safari, Opera, etc.) support this feature as well.

Main features of the "UI" tab

Initial state

The initial state of an Edit control is the default state of the control when the window or page is opened. The following states are available:

Parameters

TAB key action: This option makes a control accessible or inaccessible via the Tab key. By default, the "Accessible by TAB" option is selected when a control is created. All controls accessible via the Tab key are automatically included in window tab order. By default, the tab order is the order in which the controls are created in the window. For more details, see Tab order in a window, a page, etc..
This option corresponds to the "Accessible by TAB" option.

Validation of Edit controls via the Enter key

For each Edit control in a page, you can specify the action that will be run when the user presses the Enter key.

This allows, for example, to improve the default events in a page. For instance, there can be several search controls can in the same page, and each control can be validated by pressing the Enter key. The action performed will be the one associated with the Edit control that has focus.

To define the action associated with an Edit control:

Create a button in your page containing the desired code.
Open the Edit control description. On the "UI" tab, select the desired button in the " Action on 'Enter' " option.

Main features of the "Details" tab

An Edit control can:

support input suggestions: When the user enters a value in a control, the application automatically suggests the corresponding value from the HFSQL key item bound to the control.
For example, after the user types "Lo" in a "City" field, the application will automatically suggest "London".
This feature can only be used with key items and Text items.
Input suggestions cannot be used with non-key items, numeric items, or if an input mask is used for dates. For more details, see Input suggestions in an Edit control

An Edit control can also include:

a spelling checker that uses:
- the OpenOffice dictionary installed on the computer, or a spelling and grammar checker that uses the Word dictionary.
- an integrated spelling checker (based on Hunspell dictionaries).
- The type of spelling checker can be selected in the project description window ("Options" tab).
an input history: When a users starts typing in the control, the list of values previously entered will appear automatically. This input history is not available for multiline controls. For more details, see Saving entered data (AAF).

Main features of the "Help" tab

Displaying a hint text in an Edit control

The hint text is used to display a help text in the empty edit control. This help text disappears automatically as soon as the user enters the first character in the control.

This hint text is available for:

Text Edit controls.

The help text can be typed:

in the Edit control description window ("Help" tab in WINDEV/WINDEV Mobile and "Content" tab in WEBDEV).
programmatically with the Hint property.

The hint text uses the same style as the input area, in italic and gray.

Main features of the "Style" tab

Edit control style

The "Style" tab allows you to customize the appearance of all the elements in the Edit control. You can apply styles to different elements:

Control caption: You can define the text font, position, color, etc.
Outside border.
Text in the input area.
Input area: For example, you can define the background color, border color, etc, ...
Note: The "Margins" button allows you to set the margins between the text and the border of the input area.
Hint text.
Tokens (if any).
Invalid or required input indicators.
...

Converting an Edit control to a Static Text control

Related Examples:

Unit examples (WINDEV): The special characters

[ + ] Handling special characters in an RTF control and viewing the ASCII and ANSI codes.

Unit examples (WINDEV): The voice recognition functions

[ + ] Using the voice recognition functions.
The voice commands of Windows Vista (or Windows XP, with a specific software) are used to control WINDEV applications with the voice.
A WINDEV application already responds to the voice when the user dictates in an edit control or spells out the caption of a button.
You also have the ability to program a specific voice command to perform a specific action.

Unit examples (WINDEV): Advanced input mask

[ + ] Handling the input masks in WINDEV:
- Defining the format of positive/negative number in a numeric edit control
- Defining how negative numbers will be displayed in a numeric edit control
- Defining how the value 0 will be displayed in a numeric edit control
- Using a regular expression to prevent from typing characters other than 1, 2, 3, 4, 5 and 6.
- Using a regular expression to "regulate" the input of a French registration number

Training (WINDEV): WD Search Control

[ + ] This example explains how to manage an edit control used to perform FullText searches of "google" type in your database.

Complete examples (WEBDEV): WW_Rewali

[ + ] This example is a site for travel booking.

It proposes travels at very attractive prices.
You have the ability to choose the travel duration, the start dates, then validate the purchase until the payment via Paypal.

It is using the "scrolling banner" control and the planes.