Progressive forms
Forms work without javascript!
senior engineer at second spectrum
With Oracle clinging on to the trademark for javascript, you'll be happy to know that your forms will work without it!
Jokes aside, this is a really cool framework feature that connects server actions directly to your forms.
What does this look like?
So before React 19 and before we had waku server actions, a very basic form might look like this:
const ClientForm = () => {
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
await fetch('/api/submit', {
method: 'POST',
body: JSON.stringify(Object.fromEntries(formData)),
});
};
return (
<form onSubmit={handleSubmit}>
<input name="email" type="email" required />
<input name="password" type="password" required />
<button type="submit">Submit</button>
</form>
);
};This is just fine, but if we want to run our form in an environment with no javascript. Or we just want to optimize the form to not need to render, we can upgrade to a new way.
Introducing progressive forms with Waku Server actions
In this example, it can be pure RSC built. There is no client JS needed.
async function submitForm(formData) {
'use server';
await fetch('https://api.example.com/submit', {
method: 'POST',
body: JSON.stringify(Object.fromEntries(formData)),
});
}
const ServerForm = () => {
return (
<form action={submitForm}>
<input name="email" type="email" required />
<input name="password" type="password" required />
<button type="submit">Submit</button>
</form>
);
};We can sprinkle in some js where it can be helpful. Like for client-side validation, or for showing errors from the server. The key point though, is that the form will always submit and pair with your server action regardless of whether JS is running or not.