Express JS Tutorial | Form Data Handling
Handling form data in Express JS is a crucial part of building web applications. In this tutorial, we will explore how to handle form data in an Express JS application.
Setting up Express JS
First, make sure you have Node.js and npm installed on your machine. If not, you can download and install them from https://nodejs.org/.
To create a new Express JS application, you can use the following commands in your terminal:
$ mkdir express-app
$ cd express-app
$ npm init -y
$ npm install express
Handling Form Data
Now, let’s create a simple form in our Express JS application. In your project directory, create a new file called index.html and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Form Data Handling</title>
</head>
<body>
<h1>Form Data Handling</h1>
<form action="/submit" method="post">
<input type="text" name="username" placeholder="Enter your username"><br>
<input type="password" name="password" placeholder="Enter your password"><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
In this form, we have two input fields for username and password, and a submit button. The form’s action is set to /submit, which is the route we will handle in our Express JS application.
Now, let’s create an Express JS server in a new file called app.js and add the following code:
const express = require('express');
const app = express();
// Parse URL-encoded bodies (as sent by HTML forms)
app.use(express.urlencoded());
// Handle the form submission
app.post('/submit', (req, res) => {
const username = req.body.username;
const password = req.body.password;
// Do something with the form data
// ...
res.send(`Username: ${username}, Password: ${password}`);
});
app.use(express.static('public'));
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
In this code, we use the express.urlencoded() middleware to parse the form data. Then, we handle the form submission by defining a POST route at /submit. Inside the route handler, we can access the form data using req.body, and then process it as needed.
Finally, we start the Express JS server and serve the static index.html file using the express.static() middleware.
Conclusion
Handling form data in Express JS is relatively simple and straightforward. By using the express.urlencoded() middleware, we can easily parse and access form data in our Express JS applications.
By following this tutorial, you should now have a good understanding of how to handle form data in Express JS. You can further explore and customize form handling based on your specific application requirements.
