Form

A plain Form helper (not a custom element) that builds a native <form> and binds inputs to a target object, providing before/after submit hooks.

Example

JS
const el = Form.create(player, {
    content: f => [
        f.label('name'),
        f.text('name'),
        f.submit('Save')
    ],
    afterSubmit: rec => doSomething(rec)
})
document.body.append(el)

Constructor

new Form(target, options)
target : Object

the record object to bind inputs to

options : Object optional
content : function optional

function receiving the Form instance, returns content for the form. The Form instance provides type helpers (e.g. f.text(), f.select(), f.checkbox()) for each input type.

beforeSubmit : function optional

called before submit with target. Return false to cancel.

afterSubmit : function optional

called after successful submit with target

Instance Methods

F   input(attribute, options) → HTMLElement

Generate a bound Input element for the given attribute

Parameters

attribute : string

the target attribute name to bind to

options : Object optional
type : string optional

input type (text, select, checkbox, date, etc.)

Returns

HTMLElement

the created input element

F   label(attribute, contentOrOptions, maybeOptions) → HTMLLabelElement

Build a <label> linked to the input for the given attribute

Parameters

attribute : string

the attribute name (auto-titleized if no content given)

contentOrOptions : string | Object optional

label text, or options object if no text

maybeOptions : Object optional

options when first arg is content string

Returns

HTMLLabelElement
F   submit(labelOrOptions, maybeOptions) → HTMLButtonElement

Create a submit <button>

Parameters

labelOrOptions : string | Object optional

button label text, or options object

maybeOptions : Object optional

options when first arg is label string

Returns

HTMLButtonElement

Static Methods

F   create(target, options) → HTMLFormElement

Create a Form and return the native <form> element

Parameters

target : Object

the record object to bind inputs to

options : Object optional

see Form constructor options

Returns

HTMLFormElement

the built <form> element

F   new(target, options) → Form

Create and return a Form instance

Parameters

target : Object

the record object to bind inputs to

options : Object optional

see Form constructor options

Returns

Form

the Form instance (access the element via .el)