2 snippets across 2 stacks - HTML & CSS, React
Also written as submit form
<form action="url" method="GET|POST">
...
</form><form action="/api/subscribe" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>Note GET appends data to the URL (visible, cacheable, bookmarkable). POST sends data in the request body (for sensitive data and large payloads). Omitting method defaults to GET.
// Traditional
<form onSubmit={handleSubmit}>
// React 19 Actions
<form action={actionFn}>// Traditional approach
function FeedbackForm() {
const [message, setMessage] = useState('');
const [submitted, setSubmitted] = useState(false);
async function handleSubmit(e) {
e.preventDefault();
await sendFeedback(message);
setSubmitted(true);
setMessage('');
}
if (submitted) return <p>Thank you for your feedback!</p>;
return (
<form onSubmit={handleSubmit}>
<textarea
value={message}
onChange={e => setMessage(e.target.value)}
required
/>
<button type="submit">Submit</button>
</form>
);
}Note With onSubmit, always call e.preventDefault() to stop the browser from reloading the page. With React 19 form actions, preventDefault is handled automatically. Both patterns are valid -- actions are newer and reduce boilerplate.