Mastering TypeScript/

...

/

Handling Form Submission

Handling Form Submission

Learn how to handle form submission in Express by creating a login form template and processing POST requests.

We'll cover the following...

Let’s now take a look at how Express can interpret data that is submitted from a form on a web page. To do this, we will create a login.hbs template file and modify our login.ts route handler to accept a POST request, along with the existing GET request.

Creating the login template

We can create a file in the views directory named login.hbs as follows:

Press + to interact
<h1>Login</h1>
<form method="post">
  <p>{{errorMessage}}</p>
  <p>Username :
    <input name="username" />
  </p>
  <p>Password :
    <input name="password" type="password" />
  </p>
  <button 
    type="submit" 
    class="btn btn-primary">
    Login
  </button>
</form>

Here, we have an HTML template that contains a form.

  • Line 3: Within this form, we have a paragraph element that will show the errorMessage property if it exists.

  • Lines 4–9: We then have an input control with the name attribute set to username, and another input control ...