| sidebar_label | Form Input properties |
|---|---|
| title | JavaScript Form - Input Properties |
| description | You can explore the Properties of the Input control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. |
{
type: "input",
name?: string,
id?: string, // must be unique if set, auto-generated if not set
value?: string | number,
css?: string,
disabled?: boolean, // false by default
height?: string | number | "content", // "content" by default
hidden?: boolean, // false by default
padding?: string | number,
required?: boolean, // false by default
validation?: string | (input: string | number) => boolean,
width?: string | number | "content", // "content" by default
autocomplete?: boolean, // false by default
icon?: string,
inputType?: "text" | "password" | "number", // "text" by default
max?: number | string,
maxlength?: number | string,
min?: number | string,
minlength?: number | string,
placeholder?: string,
readOnly?: boolean, // false by default
hiddenLabel?: boolean, // false by default
label?: string,
labelPosition?: "left" | "top", // "top" by default
labelWidth?: string | number,
helpMessage?: string,
preMessage?: string,
successMessage?: string,
errorMessage?: string,
}| type | (required) the type of a control, set it to "input" |
| name | (optional) the name of a control |
| id | (optional) the id of a control, must be unique if set, auto-generated if not set |
| value | (optional) the initial value of the input |
| css | (optional) adds style classes to a control |
| disabled | (optional) defines whether a control is enabled (false) or disabled (true), false by default |
| height | (optional) the height of a control, "content" by default |
| hidden | (optional) makes an input hidden, false by default |
| padding | (optional) sets padding between a cell and a border of the Input control |
| required | (optional) defines whether a control is required, false by default |
| validation | (optional) the rule of input validation. Can be set in two ways:
|
| width | (optional) the width of a control, "content" by default |
| autocomplete | (optional) enables/disables the autocomplete functionality of the input, false by default |
| icon | (optional) the CSS class name of an icon from the used icon font |
| inputType | (optional) sets the type of an input: "text", "password", "number". Using the "number" type for the input sets the type of the value attribute to "number". Use the "password" value to specify a field for entering a password. "text" by default |
| max | (optional) the maximal value allowed in the input. The attribute works only with the input type: "number". |
| maxlength | (optional) the maximum number of characters allowed in the input. The attribute works with the following input types: "text", "password". |
| min | (optional) the minimal value allowed in the input. The attribute works only with the input type: "number". |
| minlength | (optional) the minimum number of characters allowed in the input. The attribute works with the following input types: "text", "password". |
| placeholder | (optional) a tip for the input |
| readOnly | (optional) defines whether an input is readonly, false by default |
| hiddenLabel | (optional) makes the label invisible, false by default |
| label | (optional) specifies a label for a control |
| labelPosition | (optional) defines the position of a label: "left" | "top", "top" by default |
| labelWidth | (optional) sets the width of the label of a control |
| helpMessage | (optional) adds a help message to a control |
| preMessage | (optional) a message that contains instructions for interacting with the control |
| successMessage | (optional) a message that appears in case of successful validation of the control value |
| errorMessage | (optional) a message that appears in case of error during validation of the control value |
Related article: Input