Form

A form control

Import

import { Form } from "@schukai/monster/source/components/form/form.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Name

Introduction

The Form component is a sophisticated web control from the Monster library that organizes and manages form data effectively. This component is designed to handle complex form interactions, ensuring data consistency and validation across various form fields. It is an ideal choice for applications requiring detailed data collection and validation.

Key Features

Data Binding and Validation: Automatically manages data binding between form fields and data sources, and validates data using built-in validation mechanisms.
Event Handling: Provides comprehensive event handling options that trigger data write-backs and validation on various user interactions.
Customizable Appearance: Offers extensive options for customization, allowing the form and its elements to be styled according to application design requirements.
Advanced Configuration: Supports advanced configuration options for features like mutation observation, which monitors changes in form elements, and write-back features for real-time data synchronization.
Accessibility: Built with accessibility in mind to ensure that all users can interact with the form effectively.

Improving the user experience

The Form component enhances user experience by providing a structured and error-free data entry process. It simplifies form interactions by automatically managing data bindings and validations, reducing the likelihood of user errors and improving data integrity. This component ensures a smoother and more reliable interaction for users, thereby enhancing overall user satisfaction.

Efficiency in the development process

Incorporating the Form component into web applications streamlines the development process by reducing the amount of code required for form management. Its reusable design and built-in functionalities reduce development time and effort, allowing developers to focus more on core application features. The component's design ensures that developers can easily adapt it to various application needs, promoting efficiency and scalability.

Form Simple

Javascript

/** this example does not use an extra script **/

HTML

/** this example does not use an extra html file **/

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The monster-form component is a container for grouping form elements. Built using the Shadow DOM, it encapsulates the form's structure and styling, ensuring isolation and consistency. Developers can use this component to wrap form controls while maintaining control over styling and layout.

Shadow DOM and Accessibility

The use of the Shadow DOM ensures that the internal form structure is isolated from the global styles of the application. This encapsulation prevents unintended interference from external CSS or scripts while providing a predictable layout for the form.

The component follows accessibility standards by allowing developers to use native form elements such as input, select, and textarea inside the form. It also supports reportValidity for validating child form elements.

Customizing Through Exported Parts

The monster-form component exposes internal parts for styling using the part attribute. This allows targeted CSS customization of the form container and its related elements.

Available Part Attributes

control: Represents the main control wrapper around the form.
form: Targets the internal form element, allowing you to apply custom styles to the form layout.

Below is an example of how to customize the form using CSS:


monster-form::part(form) {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 6px;
    background-color: #fafafa;
}

monster-form::part(control) {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
}

Explanation of the Example

monster-form::part(form): Styles the internal form element with padding, a border, and a light background.
monster-form::part(control): Adds spacing and organizes the main form container into a column layout.

Accessibility

The monster-form component is designed to ensure accessibility for all users:

Native form elements retain their default behaviors and semantics for screen readers.
Keyboard navigation works seamlessly within the form container.
The reportValidity method allows developers to validate child elements programmatically, ensuring proper error feedback.

By providing a well-structured form container and supporting accessible form controls, the monster-form component ensures an inclusive user experience.

HTML Structure

<monster-form></monster-form>

JavaScript Initialization

const element = document.createElement('monster-form');
document.body.appendChild(element);

Exported

Form

Derived from

DataSet

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the DataSet.

Option

Type

Default

Description

templates

object

undefined

Template definitions

templates.main

string

undefined

Main template

classes

object

undefined

Class definitions

classes.form

string

undefined

Form class

writeBack

object

undefined

Write back definitions

writeBack.events

string[]

undefined

Write back events

bind

object

undefined

Bind definitions

reportValidity

object

undefined

Report validity definitions

reportValidity.selector

string

undefined

Report validity selector

features.mutationObserver

boolean

undefined

Mutation observer feature

features.writeBack

boolean

undefined

Write back feature

features.bind

boolean

undefined

Bind feature

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the DataSet.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the DataSet.

Behavioral methods

refresh()3.70.0

Returns

{Promise}

This method is called when the component is created.

Static methods

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Other methods

reportValidity()2.10.0

Returns

{boolean}

Run reportValidation on all child html form controls.

Events

The component emits the following events:

monster-options-set
monster-selected
monster-change
monster-changed

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.