HTTP requests, the main communication method between clients and servers, consist of a request line, headers, and an optional body. The request line includes the HTTP method (GET, POST, etc.), the URL, and the HTTP version. Headers provide more information about the request or client, and the body contains the payload.

HTML forms use the action attribute for the form data destination URL and the method attribute for the HTTP method. Upon form submission, the form data is automatically attached to the HTTP request body.

JavaScript enhances HTML forms by allowing form data manipulation, form submission prevention using event.preventDefault(), and form data validation through methods like checkValidity().

JavaScript can also send HTTP requests independently of HTML forms via the Fetch API and XMLHttpRequest object. Both enable asynchronous HTTP requests, but the Fetch API is more modern and returns Promises, simplifying asynchronous operations handling.

Here's how to send a POST request with the Fetch API:

async function postData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });

  return response.json();
}

In this function, we first specify the URL and data to be sent. We then use the fetch function to send a POST request to the specified URL, setting the 'Content-Type' header to 'application/json' and the body to a JSON string representation of the data. The function then waits for the promise returned by fetch to resolve, and returns the response as a JSON object.