Rat docs

Forms

Forms in Rat are just > page state plus event handlers. Bind an input to a page var with value[name] and on_input[name << event.target.value]; submit the form by calling a function on click or on submit. No FormData, no controlled-component boilerplate.

Two-way input binding

Read with , write via on_input

The value attribute reads the page var; the on_input handler writes back to it. Anywhere [name] reads in the same page repaints as the user types.

> page
name: ''

<input value[name] on_input[name << event.target.value]>
<p> hello, [name]
Result

hello,

Submit handler

on_click runs the function

Submission is a function call — usually one that hits a database or service. Mutating server state from the handler patches the relevant spans without a full reload.

> page
name: ''
email: ''

<input value[name] on_input[name << event.target.value]>
<input value[email] on_input[email << event.target.value]>
<button on_click[main_db.user.add({name: name, email: email})]>
    sign up

Inline validation

Guards check page state

Guards work for client-side validation — the condition is just a Rat expression over page state. Render the error inline; it appears the moment the input stops satisfying the rule.

> page
email: ''

<input value[email] on_input[email << event.target.value]>
(len(email) > 0)
    (not has(email, '@'))
        <p class['error']> email needs an @

Next: File uploads — sending binary data through /__rat__/upload.