Unified interface for HTML form fields with synchronized binding to object properties
npm install html-form-fieldUnified interface for HTML form fields with synchronized binding to object properties
- Unified getter/setter for text inputs, checkboxes, radio buttons, and select elements
- Two-way binding between form fields and object properties (synchronized updates in both directions)
- Built-in change detection with onChange and onWrite callbacks
- Small browser build: html-form-field.min.js under 4KB minified, under 2KB gzipped
- Full TypeScript support - html-form-field.d.ts for detailed specifications
``typescript
import {formField} from "html-form-field"
interface Context {
nickname: string
email: string
favo: string
}
const form = document.querySelector("form")
const ctx = {} as Context
formField({form, bindTo: ctx, name: "nickname"})
console.log(ctx.nickname) // reads from form field
ctx.nickname = "John" // updates form field
`
#### HTML Example
`html
#### Value Access
js
const email = formField({form, name: "email"})console.log(email.value) // current value
email.value = "john@example.com" // update value
`#### Multiple Selections
js
const favo = formField({form, name: "favo", delim: ","})favo.toggle("tech") // toggle checkbox
favo.toggle("travel", true)
favo.toggle("trading", false)
console.log(favo.has("travel")) // check if selected
// Shortcut to item by index. Equivalent to items().at(index))
const firstItem = favo.itemAt(0)
console.log(firstItem.checked)
// Shortcut to item by value. Equivalent to items().find(v => v.value === value)
const travelItem = favo.itemOf("travel")
console.log(travelItem.checked)
`#### Change Handling and Default Values
js
formField({
form,
bindTo: ctx,
name: "email",
onWrite: ({name, value}) => sessionStorage.setItem(name, value),
onChange: ({name, value}) => submitForm(),
defaults: [sessionStorage.getItem("email")],
})
``- https://www.npmjs.com/package/html-form-field
- https://github.com/kawanet/html-form-field