htmlinput
The htmplinput widget is used to control the type and appearance of data input controls used for a field in a dynamic server page. It is mapped to the HTML <input> element.
The html:type property determines whether the input control should be an edit box, check box, date picker, or other supported control.
Default Logical Widgets
Uniface provides the following default logical widgets that are mapped to the htmplinput physical widget.
- EditBox—an input control of type
text, which is displayed as a single-line text field for data entry. - Checkbox—an input control of type
checkboxfor setting a Boolean value. - CommandButton—an input control of type
buttonfor initiating an action. Because buttons are usually not editable, client syntax checking is disabled and the field syntax is explicitly set to non-editable. - CommandButton_updateable—an input control of type
buttonfor initiating an action. To enable browser-side changes to the text of the button, the button is editable, but client syntax checking is disabled. - DatePicker—an input control of type
date, intended for entering a date and/or time value. It enables the user to select a date from a drop-down calendar. - Password—an input control of type
password, which masks the data entered in the field. - NumberSpinnerBox—an input control of type
number, for selecting a number within a range.
Triggers
- trigger detail—executed on click, or double-click when
detail=dblclickis set - webtrigger onBlur—executed when the widget loses focus.
- webtrigger OnChange—executed when user changes the value. It may be fired several times when
html:type="date". - webtrigger onSyntaxError —executed in response to the OnChange event in browser.
- webtrigger onSyntaxErrorResolved —executed in response to the OnChange event in browser.
Supported Combinations of HTML Type and Data Type
The htmlinput widget can be used with most Uniface data types, but not all data types are compatible with the selected HTML control type, as defined by the type property.
Some combinations of control type and data type are not supported, because the control cannot format the data correctly. When this occurs, a format error results and an exception is displayed in the web browser's console.
The type property can be set to any HTML-supported input control type, not just the ones for which Uniface has defined logical widgets. The following table shows valid control type and data type combinations, and indicates how data is formatted.
- ✓ Supported. Best match.
- ✓ Supported.
- C Supported. Data is formatted/deformatted on the browser.
- S Supported. Data is formatted on the server to be compatible with the control type.
- - Not supported. Data format is incompatible with HTML control type.
type of htmlinput |
Logical Widget | Data Types | |||||||
|---|---|---|---|---|---|---|---|---|---|
| S | B | N | F | D | T | DT | I | ||
| button | CommandButton | ✓ | C | C | C | C | C | C | - |
| checkbox | CheckBox | C | ✓ | C | C | - | - | - | - |
| password | Password | ✓ | - | - | - | - | - | - | - |
| text | EditBox | ✓ | C | C | C | C | C | C | - |
| hidden | ✓ | - | - | - | - | - | - | - | |
| radio | Not supported. Use RadioGroup widget |
- | - | - | - | - | - | - | - |
| file, image, radio, reset | Not supported. | - | - | - | - | - | - | - | - |
| HTML5-specific inputs: | |||||||||
| date | DatePicker | ✓ | - | - | - | ✓ | - | - | - |
| time | ✓ | - | - | - | - | ✓ | - | - | |
| datetime | ✓ | - | - | - | - | - | ✓ | - | |
| datetime-local | ✓ | - | - | - | - | - | ✓ | ||
| month | ✓ | - | - | - | - | - | - | - | |
| week | ✓ | - | - | - | - | - | - | - | |
| number | NumberSpinnerBox | ✓ | - | ✓ | ✓ | - | - | - | - |
| range | ✓ | - | ✓ | ✓ | - | - | - | - | |
| color | ✓ | - | - | - | - | - | - | - | |
| ✓ | - | - | - | - | - | - | - | ||
| tel | ✓ | - | - | - | - | - | - | - | |
| url | ✓ | - | - | - | - | - | - | - | |
| search | ✓ | - | - | - | - | - | - | - | |
Widget Properties
For information on widgets and the types of widget properties, see and Widgets for Dynamic Server Pages and Widget Properties for the Dynamic Server Page.
HTML Properties
The htmlinput supports the html:type property (which is set by each logical widget mapped to this physical widget), as well as the following HTML properties:
| Property | Technical Name | Description |
|---|---|---|
| HTML Type | html:type
|
html:type |
| Access Key | html:accesskey
|
accesskey |
| Style Class | html:class
|
class |
| Disable the Widget | html:disabled
|
disabled |
| Read Only | html:readonly
|
readonly |
| Tab Index | html:tabindex
|
tabindex |
| Tool Tip Text | html:title
|
title |
Uniface Properties
The following properties represent Uniface properties that have no equivalent in HTML or CSS, or which are used when a form is converted to a DSP.
| Uniface Property | Technical Name |
|---|---|
| Background Color (BackColor) | backcolor |
| Syntax Check on Browser (ClientSyntaxCheck) | clientsyntaxcheck |
| Foreground Color (ForeColor) | forecolor |
| class:ClassName | class:ClassName
|
| RenderingIncrement | renderingincrement |
CSS Properties
The following tables described the supported CSS properties that can be used to style the htmlinput widget and the logical widgets that map to it.
Background Properties
The following properties control the appearance and behavior of background colors and images.
| Property | Technical Name | W3C Description |
|---|---|---|
| Background Image Scrolls | style:background-attachment
|
background-attachment |
| Background Color | style:background-color
|
background-color |
| Background Image URL | style:background-image
|
background-image |
| Background Image Position | style:background-position
|
background-position |
| Background Image Title | style:background-repeat
|
background-repeat |
Border Properties
The following properties control the appearance and behavior of widget borders.
| Property | Technical Name | W3C Description |
|---|---|---|
| Border Color | style:border-color
|
border-color |
| Border Style | style:border-style
|
border-style |
| Border Width | style:border-width
|
border-width |
Box Properties
The following properties control the appearance and behavior of block and inline boxes.
| Property | Technical Name | W3C Description |
|---|---|---|
| Mouse Pointer | style:cursor
|
cursor |
| Display Behavior | style:display
|
display |
| Positioning Scheme | style:position
|
position |
| Vertical Alignment | style:vertical-align
|
vertical-align |
| Visibility | style:visibility
|
visibility |
| Z-index | style:z-index
|
z-index |
Layout Properties
The following properties control the field dimensions and offsets.
| Property | Technical Name | W3C Description | Limitations |
|---|---|---|---|
| Bottom Offset | style:bottom
|
bottom | Percentages not supported for CommandButton |
| Height | style:height
|
height | Percentages not supported under Internet Explorer for CommandButton and TextArea: |
| Left Offset | style:left
|
left | |
| Margins | style:margin
|
margin | Percentages not supported under Internet Explorer for Picture |
| Maximum Height | style:max-height
|
max-height | Percentages not supported under Internet Explorer for CommandButton and TextArea: |
| Maximum Width | style:max-width
|
max-width | Percentages not supported under Internet Explorer for CommandButton |
| Minimum Height | style:min-height
|
min-height | Percentages not supported under Internet Explorer for CommandButton and TextArea: |
| Minimum Width | style:min-width
|
min-width | Percentages not supported under Internet Explorer for CommandButton. |
| Paddings | style:padding
|
padding | This property has no effect on Internet Explorer 6 for the RadioGroup |
| Right Offset | style:right
|
right | |
| Top Offset | style:top
|
top | Percentages not supported |
| Width | style:width
|
width | Percentages not supported under Internet Explorer for the CommandButton. |
List Properties
The following properties determine the appearance of lists.
| Property | Technical Name | W3C Description |
|---|---|---|
| List Style Image | style:list-style-image
|
list-style-image |
| List Style Position | style:list-style-position
|
list-style-position |
| List Style Type | style:list-style-type
|
list-style-type |
NLS Properties
These properties determine the direction of the text and of embeddings and overrides for the Unicode bidirectional algorithm.
| Property | Technical Name | W3C Description | Limitations |
|---|---|---|---|
| Direction | style:direction
|
direction |
DropdownList, DatePicker: rtl not supported
|
| Unicode Bidirectional Behavior | style:Unicode-bidi
|
Unicode-bidi |
Text Properties
The following properties control the appearance of text in the field or label.
| Property | Technical Name | W3C CSS Description | Limitations |
|---|---|---|---|
| Text Color | style:color
|
color | |
| Font Family | style:font-family
|
font-family | |
| Font Size | style:font-size
|
font-size | |
| Font Style | style:font-style
|
font-style | |
| Font Variation | style:font-variant
|
font-variant | |
| Font Weight | style:font-weight
|
font-weight | |
| Letter Spacing | style:letter-spacing
|
letter-spacing | |
| Line Height | style:line-height
|
line-height | |
| Text Alignment | style:text-align
|
text-align | The value justify is not supported for the EditBox, DropdownList, DatePicker, Password widgets. |
| Text Decoration | style:text-decoration
|
text-decoration |
The value blink is not supported under Internet Explorer for the EditBox, CommandButton, DropdownList, TextArea, Plain, Password widgets.
|
| Text Indent | style:text-indent
|
text-indent | |
| Text Transform | style:text-transform
|
text-transform | |
| Word Spacing | style:word-spacing
|
word-spacing |
