Core Component Types

Core component types are the backbone of SmarkForm:

📖 Table of Contents

Complex field types
- type: form and type: list
Scalar field types
Non field component types
- type: trigger
- type: label

Complex field types

type: form and type: list

📋 form and 📋 list provide the structure that allows to handle any possible JSON data including nested objects and arrays.

form imports and exports plain JSON objects.
list imports and exports JSON arrays.

Scalar field types

Notice that the SmarkForm field types are not necessarily related to the type attribute of <input> tags even they can limit it’s allowed values.

This way a SmarkForm component of type input can be defined over either <select>, a <textarea> or a <input> tag with any valid value of its type property while, in the case of number, only a <input> tag with a “number” as its type attribute is allowed.

And so on…

type: input

The 📋 input component type provide basic support for all HTML form fields (<input>, <textarea> and select) no matter, in case of inputs its actual type attribute.

Imports and exports String like regular HTML form fields.

type: number and type: date

The 📋 number and 📋 date component type extends the Input component type providding extra sanitation (when importing) and formatting (when exporting).

number imports and exports Number.
date imports and exports Date.
If inappropriate types (like String) are imported, they are properly converted on the fly.

type: select

The 📋 select compenent type will (🚧 since it is not yet implemented 🚧) provide support for advanced features like dynamic options loading and update, even reacting to changes of other fields in a really transparent manner thanks to the (future) “API interface”.

Will inmport and export array of String.
Will allow configuration to expor arrays of different types.

The Singleton Pattern.

All Scalar field types implement the so called Singleton Pattern.

The Singleton Pattern consists in using a non-field html tag as a SmarkForm component of given scalar type.

👉 This allow for complex HTML to work as a single field.

👉 That HTML should contain one and only one HTML form field (<input>, <textarea> or <select>).

This allow them to incorporate labels and triggers which is specially convenient for the list component type since it make possible to incorporate triggers for its actions in every list item even for lists of scalars.

Example:

  <!-- ... -->
  <li data-smark='{"type":"input"}'>
    <input placeholder='Phone number' type='tel'/>
    <button data-smark='{"action":"removeItem"}'>❌</button>
  </li>
  <!-- ... -->

See Applying the singleton pattern in the «list» Component Type chapter for a more real-world example.

Non field component types

There are other component types with special mission that are not form field types:

type: trigger

The 🕹️ Triggers are used for buttons (or any other elements) to receive interaction events (mouse “click” by default, but they will be capable to handle others such as keyboard events) and trigger predefined actions on propper components (i.e. adding or removing items to lists).

The good thing about triggers is that they usually don’t need any extra wiring to interact with their targeted components. They just target them by their own relative position in the SmarkForm form tree or, at most, with filesystem-like relative paths when necessary.

type: label

The 🏷️ Labels will (🚧 since it is not yet implemented 🚧) be used to enhance regular <label> to properly resolve their for attribute from a SmarkForm relative path ensuring it always matches the propper id no matter if it is a root-level field or in the bottom of several subform and/or list nesting levels.

«form» Component Type

⏩