SyntaxShelf

Form action

2 snippets across 2 stacks - HTML & CSS, React

HCHTML & CSS

Form Element

HC · Forms
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

Actions (Form Actions)

RE · React 19 Features
Syntax
<form action={actionFn}>
  ...
</form>
// actionFn receives FormData automatically
Example
function ContactForm() {
  async function submitContact(formData) {
    const name = formData.get('name');
    const email = formData.get('email');
    await sendContactRequest({ name, email });
  }

  return (
    <form action={submitContact}>
      <input name="name" placeholder="Your name" required />
      <input name="email" type="email" placeholder="Email" required />
      <button type="submit">Send</button>
    </form>
  );
}

Note Actions are async functions passed to the action prop of <form>. They receive FormData as an argument. React handles the pending state and error transitions automatically. Actions work with useActionState and useFormStatus for richer patterns.

Frequently asked questions

How does HTML & CSS handle form action?
This task is covered in 2 stacks on this page: HTML & CSS, React. The "Form Element" snippet in HTML & CSS uses `<form action="url" method="GET|POST">`.
Which code does the HTML & CSS example use?
The "Form Element" snippet uses `<form action="url" method="GET|POST">`, from the Forms section of the HTML & CSS cheat sheet.
Which stacks cover "form action" on this page?
HTML & CSS, React. Together they hold 2 copy-ready snippets for this task.
Is there anything to watch out for?
Yes. For "Form Element": 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.

Browse all tasks by intent