A form that supports an extended set of elements.
The component provides validation and the ability to save user input to the backend database. Check form documentation for more detailed description.
var form = webix.ui({
view:"form",
elements:[
{ view:"text", label:"Email" },
{ view:"text", type:"password", label:"Password" },
{cols:[
{ view:"button", value:"Login", css:"webix_primary" },
{ view:"button", value:"Cancel" }
]}
]
});
| addView | adds a new view to a layout-like widget or moves an existing one |
| adjust | adjusts the component to the size of the parent HTML container |
| attachEvent | attaches the handler to an inner event of the component |
| bind | binds components |
| blockEvent | temporarily blocks triggering of ALL events of the calling object |
| callEvent | calls an inner event |
| clear | clears all the fields in a specified form |
| clearValidation | removes "data incorrect" highlighting from invalid text fields |
| define | redefines a single configuration property (or a object with properties) |
| destructor | destructs the calling object |
| detachEvent | detaches a handler from an event (which was attached before by the attachEvent method) |
| disable | disables the calling view (makes it dimmed and unclickable) |
| enable | enables the calling view that was disabled by the 'disable' method |
| focus | sets focus into the necessary component |
| getChildViews | returns child views of the calling component |
| getCleanValues | returns object with original form values |
| getDirtyValues | returns object with changed values |
| getFormView | returns master form for the input |
| getNode | returns the main HTML container for the calling object |
| getParentView | returns the parent view of the component |
| getScrollState | returns the scroll position |
| getTopParentView | returns the top parent view |
| getValues | derives input values from the form |
| hasEvent | checks whether the component has the specified event handler |
| hide | hides the view |
| index | returns the cell index in the layout collection |
| isDirty | checks whether changes were made within the form |
| isEnabled | checks whether the view is enabled |
| isVisible | checks whether the view is visible |
| load | loads data from an external data source |
| mapEvent | routes events from one object to another |
| markInvalid | marks a form control invalid |
| parse | loads data to the component from an inline data source |
| queryView | returns inner element/elements of a widget that correspond(s) to the defined parameters |
| reconstruct | rebuilds the layout |
| refresh | repaints the component |
| removeView | removes the specified view of a layout-like component |
| render | renders the specified item or the whole component |
| resize | adjusts the view to a new size |
| resizeChildren | resizes all children of the called component |
| restore | restores the saved state of a layout |
| scrollTo | scrolls the data container to a certain position |
| serialize | serializes the current layout state to a JSON object |
| setDirty | marks the form as the one with changed values and vice versa |
| setValues | sets values into the inputs of a form/toolbar/property sheet control |
| show | makes the component visible |
| showBatch | makes visible those elements, the parameter 'batch' of which is set to the specified name |
| unbind | breaks "bind" link |
| unblockEvent | cancels events blocking that was enabled by the 'blockEvent' command |
| validate | checks data in the form |
| onAfterLoad | fires after server side loading is complete |
| onAfterScroll | fires when to component is scrolled in any direction |
| onAfterValidation | fires after data has been validated |
| onBeforeLoad | fires immediately before data loading has started |
| onBeforeValidate | called before running validation |
| onBindRequest | fires when the component is ready to receive data from the master component |
| onChange | fires when data in the input of related form/toolbar is changed |
| onDestruct | occurs when component destroyed |
| onLoadError | fires when an error occurs during data loading (invalid server side response) |
| onSubmit | fires when enter key is pressed for a focused control in the form |
| onValidationError | fires when a form input fails to pass validation |
| onValidationSuccess | fires after a form input has passed validation successfully |
| onValues | fires after values have been set within a toolbar or a form |
| onViewShow | fires when any hidden view is shown |
| animate | defines the type of animation, with which the view is shown, if it is a Multiview cell |
| autoheight | sets component height according to its contents |
| borderless | used to hide the component borders |
| cols | array of views objects arranged horizontally |
| complexData | enables complex data parsing mode |
| container | an HTML container (or its ID) where the component should be initialized |
| css | the name of the CSS class or the object with styles that will be applied to the view container |
| data | JavaScript array containing data for the component |
| dataFeed | alternative data source for filtered and bound data |
| datatype | the type of loaded data |
| disabled | indicates whether an item is enabled |
| elements | a collection of subviews |
| elementsConfig | settings, which will be applied to all nested inputs |
| gravity | sets the view gravity |
| height | sets the height of the component |
| hidden | defines whether the view will be hidden initially |
| id | the ID of a widget |
| isolate | masks IDs of all inner elements |
| margin | defines the space around elements (applies the specified value to all elements) |
| maxHeight | sets the maximum height for the view |
| maxWidth | sets the maximum width for the view |
| minHeight | sets the minimal height for the view |
| minWidth | sets the minimal width for the view |
| on | allows attaching custom handlers to inner events of the component |
| padding | defines the space between the element borders and content (applies the specified value to all sides). |
| paddingX | sets the right and left padding (applies the specified value to both sides) |
| paddingY | sets the top and bottom padding (applies the specified value to both sides) |
| responsive | enables responsive mode for horizontal layout |
| rows | array of views objects arranged vertically |
| rules | defines a set of rules for input field(s) of the form(htmlform) |
| scroll | enables/disables the scroll bar |
| scrollSpeed | the time during which the component is scrolled to the specified position (in milliseconds) |
| type | defines the layout borders |
| url | the URL which the component will use to load data after its initialization |
| visibleBatch | sets the batch that will be shown initially |
| width | sets the width of a widget |