HTTP Form Element vs Fetch and XMLHttpRequest

Question

I am currently learning about web development and came across HTTP. One thing that is confusing me is how exactly to make HTTP requests. In the videos I've watched the main way they send HTTP requests are through Form Elements. Doing a little bit more research, I also found out that HTTP requests can be done manually via Fetch and XMLHttpRequest.

So I'm a bit confused on how all 3 of these work and the benefits of choosing one over the other. I do apologize if I make any mistakes, but I'm largely confused on the entire matter. I tried manually sending HTTP Requests like PUT and POST with Fetch, but that was kind of a mess. Most tutorials were using Form Elements to do so, so now I'm left wondering if that's just how it should be done.

I also read over Sending forms through JavaScript but it completely went over my head.

So I tried looking up various tutorials and websites to explain the matter of HTTP requests with HTML/CSS & Javascript. I'm hoping that someone can explain the differences between Forms, Fetch, and XMLHttpRequest. And what are the tradeoffs of using one over the other if that is applicable in this case.

Answer 1

I'm no expert on this topic but there are different use cases for Form, fetch and XMLHttpRequest

1. fetch is preferred to XMLHttpRequest because it is newer and allows a more modern interface to perform requests. In comparison to forms, you can choose the body/request content through JavaScript.
2. The form element is used when you want to send a form (user input) to a backend server. Form elements send data based on their children (sub elements). Sending a form also causes the page to reload. I prefer the form element when sending data with little overhead, considering it is meant as way for the end user to send data to a server.

TLDR; Use fetch if you want a modern api, use XMLHttpRequest if you need an older api, and use a form element if you want to send data from a series of html elements