Form submit

Form Element

syntax

<form action="url" method="GET|POST">
  ...
</form>

example

<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.

REReact

Form Submission

RE · Forms

syntax

// Traditional
<form onSubmit={handleSubmit}>
// React 19 Actions
<form action={actionFn}>

example

// 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.

HCHTML & CSS

REReact