PC SOFT

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview of edit control
  • Create an "Edit" control
  • Main characteristics of edit control
  • Type of an edit control
  • Types and masks
  • Displaying an indication text in an edit control
  • Validation of edit controls via the Enter key
  • Specific HTML 5 features
  • Swap
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview of edit control
The edit control allows the user to type information. The edit control can also be used to view information.

Create an "Edit" control

To create an "Edit" control:
  1. On the "Creation" pane, in the "Usual controls" group, click .
  2. Click the position where the control will be created in the window or page. The control appears in creation mode.
Remark: You also have the ability to create an edit control from a list of preset controls by expanding "Edit". The list of available controls (with their preview in the skin template of project) is displayed. Simply click the requested control to create it in the editor.
To display the control characteristics, select "Description" in the control popup menu.
Report editor: You also have the ability to create an edit control in a report. See Input in the reports for more details.
Main characteristics of edit control

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 character string (name, address, etc.).
  • Multiline text to display or enter several lines separated by a "Carriage Return".
  • WEBDEV - Server code HTML text to enter and format rich text.
  • Password: when typing information, all characters will be replaced by stars 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.
  • Versions 24 and later
    Text tokens to manage an input with tokens.
    New in version 24
    Text tokens to manage an input with tokens.
    Text tokens to manage an input with tokens.
  • WEBDEV - Server code Upload to manage the file upload.

Types and masks

Input mask: Several input masks can be used for each type of edit control.
These input masks are multilingual: different input masks can be selected according to the runtime language of the project. See Multilingual feature in the controls for more details.
These input masks can be modified by programming with ..InputMask.
WEBDEV - Server code

Displaying an indication text in an edit control

The hint text is used to display a help text in the empty edit control. This help text is automatically erased as soon as the user types the first character in the control.
Example of tooltip
This indication text is available for:
  • the text edit controls.
The help text can be typed:
  • in the description window of the edit control ("Help" tab in WINDEV/WINDEV Mobile and "Content" tab in WEBDEV).
  • by programming with ..Hint.
WEBDEV - Server code The style of the information text corresponds to the style of input area, in italic and gray.
  • Windows an input history: When the input is performed in the control, the list of values previously entered in the control will be automatically proposed. This input history is not proposed for the multiline controls. See Storing the input performed (AAF) for more details.
To display the control characteristics, select "Description" in the control popup menu.
WEBDEV - Server code

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 example, several search controls can be found 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 with focus.
To define the action associated with an edit control:
  1. In your page, create a button containing the requested code.
  2. Open the edit control description. In the "Details" tab, select the requested button in the "Validation button" option.
Versions 17 and later
WEBDEV - Server code

Specific HTML 5 features

Some characteristics of the edit controls use HTML 5 features:
  • Input masks. By choosing an HTML 5 input mask, the site leaves the management of input and its check to the browser. It is not the page (the site) that performs the checks, but the browser itself. It is always possible to run a WLanguage code when exiting from a control, allowing additional checks to be performed on the data entered. These features are available only for some browsers, from the following versions: Firefox 5, Chrome 12, Opera 11, Safari 5, ...
    See the help about the input masks of text, numeric, date and time controls for more details.
  • HTML 5 search control: If this option is selected for a text control, the browser will display a cross 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.
    Caution: This option is taken into account only on browsers supporting HTML 5, notably Chrome 12 and Safari 5.
  • Automatic completion: This option (located in the "Details" tab of the control description window) is used to enable (or not) automatic completion on edit controls. The auto-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.
    Auto-complete is a dangerous feature, which should be disabled for confidential data.
    This property is supported by most browsers that support HTML 5 (Firefox, Chrome, Safari, Opera, etc.).
New in version 17
WEBDEV - Server code

Specific HTML 5 features

Some characteristics of the edit controls use HTML 5 features:
  • Input masks. By choosing an HTML 5 input mask, the site leaves the management of input and its check to the browser. It is not the page (the site) that performs the checks, but the browser itself. It is always possible to run a WLanguage code when exiting from a control, allowing additional checks to be performed on the data entered. These features are available only for some browsers, from the following versions: Firefox 5, Chrome 12, Opera 11, Safari 5, ...
    See the help about the input masks of text, numeric, date and time controls for more details.
  • HTML 5 search control: If this option is selected for a text control, the browser will display a cross 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.
    Caution: This option is taken into account only on browsers supporting HTML 5, notably Chrome 12 and Safari 5.
  • Automatic completion: This option (located in the "Details" tab of the control description window) is used to enable (or not) automatic completion on edit controls. The auto-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.
    Auto-complete is a dangerous feature, which should be disabled for confidential data.
    This property is supported by most browsers that support HTML 5 (Firefox, Chrome, Safari, Opera, etc.).
WEBDEV - Server code

Specific HTML 5 features

Some characteristics of the edit controls use HTML 5 features:
  • Input masks. By choosing an HTML 5 input mask, the site leaves the management of input and its check to the browser. It is not the page (the site) that performs the checks, but the browser itself. It is always possible to run a WLanguage code when exiting from a control, allowing additional checks to be performed on the data entered. These features are available only for some browsers, from the following versions: Firefox 5, Chrome 12, Opera 11, Safari 5, ...
    See the help about the input masks of text, numeric, date and time controls for more details.
  • HTML 5 search control: If this option is selected for a text control, the browser will display a cross 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.
    Caution: This option is taken into account only on browsers supporting HTML 5, notably Chrome 12 and Safari 5.
  • Automatic completion: This option (located in the "Details" tab of the control description window) is used to enable (or not) automatic completion on edit controls. The auto-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.
    Auto-complete is a dangerous feature, which should be disabled for confidential data.
    This property is supported by most browsers that support HTML 5 (Firefox, Chrome, Safari, Opera, etc.).
Swap
Related Examples:
The edit control Unit examples (WINDEV): The edit control
[ + ] Using an edit control.
The RTF edit control Unit examples (WINDEV Mobile): The RTF edit control
[ + ] Using text in RTF format in the edit controls.
This format is very useful to format and view data.
The special characters Unit examples (WINDEV): The special characters
[ + ] Handling special characters in an RTF control and viewing the ASCII and ANSI codes.
Advanced input mask 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
WD Search Control 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.
WW_Rewali 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.
See also
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment