<div id="root"></div>
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
}
.box {
width: 300px;
h1 {
font-size: 20px;
margin: 0 0 1rem 0;
}
}
View Compiled
import React, { useState } from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";
const action = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log("Saving...", Object.fromEntries(data.entries()));
};
const App = () => {
const [formData, setFormData] = useState(new FormData());
return (
<div className="App">
<form
onSubmit={action}
onChange={(event) => setFormData(new FormData(event.currentTarget))}
>
<fieldset>
<legend>Identity</legend>
<div>
<label for="name">Name : </label>
<input id="name" name="name" defaultValue="Chris" />
</div>
<div>
<label for="email">Email : </label>
<input
id="email"
type="email"
name="email"
defaultValue="chris@email.test"
/>
</div>
</fieldset>
<fieldset>
<legend>Event</legend>
<div>
<label for="presence">Presence : </label>
<input
id="presence"
type="checkbox"
name="presence"
defaultChecked
/>
</div>
<div>
<label for="diet">Diet : </label>
<input
id="diet"
name="diet"
disabled={formData.get("presence") !== "on"}
/>
</div>
</fieldset>
<button type="submit">Submit</button>
</form>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external JavaScript resources.