41 replies

What is the default behavior when we submit an HTML form?

Hello, consider the following code:

<form action="./submit_page" method="get">
  <h2>Subscribe to our newsletter</h2>
  <p>
    <label for="name">Name (required):</label>
    <input type="text" name="name" id="name" required />
  </p>
  <p>
    <label for="email">Email (required):</label>
    <input type="email" name="email" id="email" required />
  </p>
  <p>
    <button>Sign me up!</button>
  </p>
</form>

<form action="./submit_page" method="get">
  <h2>Subscribe to our newsletter</h2>
  <p>
    <label for="name">Name (required):</label>
    <input type="text" name="name" id="name" required />
  </p>
  <p>
    <label for="email">Email (required):</label>
    <input type="email" name="email" id="email" required />
  </p>
  <p>
    <button>Sign me up!</button>
  </p>
</form>

My question is, if we let the form as it is in its default behavior, what happens when we click on the submit button?

Say I have a server running on localhost. When I press the button, am I redirected to

./submit_page

./submit_page

or the page refresh but the data is sent to the route

./submit_page

./submit_page

and it's the job of my server to handle the incoming data?

If we want to prevent a page redirection or page refresh, is there a particular attribute we should add on the form element or we should prevent the form default behavior using javascript, then use