Which fetching API does HTML form uses? XHR or Fetch

Question

How to find out which fetching API does a DOM component like HTML form uses while making http requests?

Edit: Is it possible to modify it from using one instead of another?

Answer 1

HTML Forms are using the http protocol to send and receive data and not XHR or Fetch (which are however also using that protocol)

You cannot modify the form submission to use fetch or xmlhttprequest instead of the default protocol.

If you you, as the owner/developer of the web page do not want to use the default functionality of a form, then you can hook the submit event and use preventDefault to stop the submission and use your own implementation using for example fetch or XHR.

You do not even NEED a form to use fetch or xmlhttprequest, just gather the data using form elements and an optional button

If it is not your page, you can look in the console in the network tab to see what is used to send data to the server:

Normal post (testing using POST and a form tester URL)

Example:

NOTE1: StackOverflow does not allow writing to embedded iframes. To see the script below use the iframe, see this fiddle

NOTE2: The whole idea of using fetch or xmlhttprequest will fail if the server in the action of the form does not support CORS!

window.addEventListener("DOMContentLoaded", () => { // when page is loaded
  const form = document.getElementById("myForm");
  form.addEventListener("submit", (e) => {
    e.preventDefault(); // stop submission
    const tgt = e.target; // the form
    console.log(tgt.action)
    fetch(tgt.action, // the URL
        {
          "method": tgt.method,
          body: new FormData(tgt) // the content of the form
        }
      )
      .then(response => response.text()) // return the text
      .then(text => {
        console.log(text);
        try {
          const targetFrameDocument = document.getElementById(tgt.target).contentWindow.document;
          targetFrameDocument.write(`<pre>${text}</pre>`); // the pre is not needed if the site returns html
          targetFrameDocument.close();
        } catch (err) {
          const msg = err.message;
          console.log(msg.includes("cross-origin") ? "Sorry this site does not support iframe writing, see the fiddle instead" : msg);
        }
      });
  });
});

<form id="myForm" action="https://httpbin.org/post" method="POST" target="iframe1">
  <input type="text" name="field1" value="" placeholder="Type something and hit enter" />
  <input type="submit" name="anyNameBUTSubmit" value="Optional Submit button" />
</form>

<iframe name="iframe1" id="iframe1" src="about:blank"></iframe>

Answer 2

How to find out which fetching API does a DOM component like HMTL form uses while making http requests?

It doesn't use either.

fetch and XMLHttpRequest are APIs the browser exposes to client-side JavaScript for making HTTP requests.

A <form> is handled internally by the browser, how that is done is a browser-specific implementation detail. I'm not aware of any browsers that use XHR or fetch as part of that implementation.

Edit: Is it possible to modify it from using one instead of another?

No. You can listen for a submit event then prevent the default behaviour before making your own HTTP request with fetch or XHR, but you can't change how forms are handled internally.