Forms
Forms in Rat are > page state plus event handlers. Bind an input to a page var with value[name] and on_input[name << event.target.value], then submit by calling a function on click or on submit. There is no FormData and 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. Every [name] read elsewhere on the page repaints as the user types.
> page
name: ''
<input value[name] on_input[name << event.target.value]>
<p> hello, [name] 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 with no 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 handle client-side validation: the condition is a Rat expression over page state. Render the error inline and 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 @ See also File uploads · Reactivity · Guards and loops