How web technology works? - Part 02
Tags: learning, webtechnology, node, webserver
Published: 2024-02-18 11:19:15

In this section, we will explore how to send data to a web server. We will be using the [http](https://nodejs.org/api/http.html) library in Node.js to build our server.

Before moving on, ensure you're familiar with the concepts covered in Part 1, which you can find here: [How web technology works? - Part 01](https://dev.to/amjadcp/how-web-technology-works-part-01-4ic8)



### Create form in HTML



![form.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhsv648bjwf78hwz4myj.png)


![form.html - preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld99uihe1j5tbyinwqdd.png)



HTML forms are commonly used to send data to a server. To begin, let's create an HTML form. We will be using the [POST](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) method to send data to the server. Please refer to the screenshot above for a better understanding of the form we will be using.



### Create web-server using NodeJS



![server.js-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdvvx3g5iaak49tjpp40.png)


![server.js-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zg1m6zcjbfu0jhfitwh.png)


![server.js-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dr15h6cpxexkjz1nomia.png)



Here is a server that serves HTML files. If a request is made to the "/form" path, the server will return the form.html file. The client can then make a POST request to the "/submit" path with the form data, and the server will simply log the data to the console. If the client requests any other path, they will receive a "Not Found" message. Please refer to the screenshots below for further clarification.



![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcx7ndabaycw0xzdbefy.png)

The client requests "/form" using the GET method.




![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/goh9jb620yg3j9vkzmjn.png)

The client requests “/submit” using the POST method



![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjckxnpgauf5odc9pl4l.png)

The form data in the POST request.



![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zv205u2r8wntubfhp5j.png)

The response for the POST request.



![5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1oxsrw7aqmkxbhbu22q.png)

The server logs the POST request from the client.



### **Conclusion: Sending Data to the Server - More Than Just Forms**

we explored sending data to a web server using an HTML form and Node.js. While this is a common and user-friendly approach, it's important to remember that it's just one piece of the puzzle.


**Key Takeaways:**


1. **Method Choice Matters:** The best way to send data depends on your specific needs. Whether building a contact form, an e-commerce checkout, or an API, understanding different methods like forms, JSON bodies, URL parameters, and queries is crucial for optimal communication between clients and servers.

2. **Beyond Forms:** While forms are great for user input, other methods offer more flexibility and power. JSON bodies are perfect for structured data exchange in APIs, while URL parameters and queries excel at passing smaller data chunks.

3. **Data's Final Destination:** Ultimately, the server processes and stores the received data. Databases are a common choice for persistent storage, allowing easy retrieval and manipulation.