- Overview of edit control
- Create an "Edit" control
- Main characteristics of edit control
- Type of an edit control
- Types and masks
- Displaying a hint text in an Edit control
- Edit control style
- Validation of edit controls via the Enter key
- Specific HTML 5 features
- Converting an Edit control to a Static 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:
- On the "Creation" tab, in the "Usual controls" group, click .
- Click where the control will be created in the window or page. The control appears in the editor.
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 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.
: You also have the ability to create an edit control in a report. For more details, see Input in the reports
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".
- 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.
- Text tokens to manage an input with tokens.
- 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. For more details, see Multilingual feature in the controls.
These input masks can be modified programmatically with the InputMask property.
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 is automatically erased as soon as the user types the first character in the control.
This hint text is available for:
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 style of the information text corresponds to the style of input area, in italic and gray.
- 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. For more details, see Storing entered data (AAF).
To view the characteristics of the control, select "Description" in the context menu.
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:
- The control caption: You can define the text font, position, color, etc.
- The outside border.
- The text in the input area.
- The input area: For example, you can define the background color, border color, ...
New in version 27
The "Margins" button allows you to set the margins between the text and the border of of the input area.
- The hint text.
- The tokens (if any).
- Invalid or required input indicators.
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:
- Create a button in your page containing the desired code.
- Open the edit control description. In the "UI" tab, select the desired button in the " Action on 'Enter' " option.
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, ...
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 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.).
Converting an Edit control to a Static control
Unit examples (WINDEV): The edit control
Unit examples (WINDEV): The special characters
Unit examples (WINDEV): The voice recognition functions
Unit examples (WINDEV): Advanced input mask
Training (WINDEV): WD Search Control
Complete examples (WEBDEV): WW_Rewali
This page is also available for…
Click [Add] to post a comment