How to use HTML POST for multiple inputs

HTML (HyperText Markup Language) is a markup language used to build webpages. Given its nature, it can only be used to structure layouts of a webpage.

Using HTML, we can submit form data using two methods. The first is the GET method, and the second is the POST method. As the name implies, we use GET the method when we request/get data from the server. Similarly, we use POST method when we need to send/post our form's data to the server.

In this answer, we will look into the use of the HTML POST method. Moreover, we will get an idea of using the POST method for multiple input fields.

How POST method works

POST method works by adding the form's input data to the HTTP transaction. To see how POST method works, let's take a scenario example.

Example

Let's suppose there is a company that has a portal to add its employees. The imaginary portal is running on the URL www.addEmployee.com. We can see the website's interface in the image below:

Employee add form
Employee add form

The interface allows us to add an employee by entering their name, email, and job title. Let's say we want to add John as the company's technical lead. We will enter John's information in the form and click the add button as shown below:

Employee's information written in the text fields
Employee's information written in the text fields

Once we click add, our page redirects to www.addEmployee.comIf you are running the code on a local machine then "www.addEmployee.com" will replace with "http://localhost:3000" (3000 is the default port for the node server)/employee and the form data is sent through the HTTP transaction. The data is added in key-value pair format. The key is the input field's name attribute that we specify in our HTML code, and the value is the text we enter. As shown in the HTTP transaction below, multiple input data are separated by & sign:

POST /employee HTTP/1.1
Host: addEmployee.com
name=John&email=john@example.com&jobTitle=Technical+Lead
HTTP transaction

Once redirection is done, the server extracts data from the HTTP transaction and displays the information of the required employee on the screen.

Form data fetched from HTTP transaction
Form data fetched from HTTP transaction

Code

We can see the code for our add employee example below:

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(express.static(__dirname));
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/' , (req , res)=>{
    res.send("Server Connected")
})

app.post('/employee', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  const jobTitle = req.body.jobTitle;

  res.send(`
    <h1>Employee</h1>
    <h3>Name: ${name}</h3>
    <h3>Email: ${email}</h3>
    <h3>Job Title: ${jobTitle}</h3>
  `);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});
Code for creating form with post method

Code explanation

  • Line 7: We create a form tag with action and method attributes. The action attribute specifies the page/route to which we want to send the data. The method attribute tells us that a POST request will be sent to the specified page/route.

  • Line 10: We create an input tag to get the name from the user. We set the name attribute to name.

  • Line 13: We create an input tag to get the email from the user. We set the name to email.

  • Line 16: We create an input tag to get the job title from the user. We set the name to jobTitle.

  • Line 18: We create an input tag with type set to submit. This creates a button that submits the form once clicked.

Note: The data that adds in the HTTP transaction depends on the name attributes we give to the input tags.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved