Search⌘ K
Home
Courses
Mastering TypeScript

Handling Form Submission

Explore how to handle form submissions in an Express web server using TypeScript. Learn to create and render form templates, configure body-parser middleware, and process POST request data from user input for login functionality.

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:

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