Back to all posts

Submit a form with basic HTML

This article was written for Remix 2, which has been merged into React Router 7. Some changes may be necessary.

When a user submits a form, the browser will send a request to the current route. By default, this is a GET request. The request type can be set using either method="GET" or method="POST".

<form method="POST">
  <label>
    Username
    <input type="text" name="username" />
  </label>
 
  <label>
    Password
    <input type="password" name="password" />
  </label>
 
  <button type="submit">Submit</button>
</form>

You can change the route for the submission with the action attribute. This is useful for submitting forms to other pages.

<form action="/"></form>
<form action="/app/products/new"></form>

This can be used to make a log out button

<form method="POST" action="/logout">
  <button type="submit">Log out</button>
</form>

This form will submit a GET request to Google Search.

<form action="https://google.com/search">
  <input
    aria-label="search"
    type="text"
    name="q"
  />
 
  <button type="submit">Search</button>
</form>