Los formularios son una parte fundamental en el desarrollo de aplicaciones web. Con ellas podemos, por ejemplo, alimentar bases de datos diversas con las cuales contactar a ventas, realizar una compra o bien llenar un formato de consulta.

En resumen los formularios permiten la interacción entre los usuarios y las aplicaciones web.

HTTP Requests.

Se refiere a la interacción entre el navegador del usuario con el servidor remoto mediante el protocolo HTTP. Este protocolo será la vía de comunicación y es necesario tener claro los métodos a utilizar en cada caso de uso.

Métodos.

POST, GET, PUT, DELETE son los métodos HTTP más comunes. POST se usa para enviar formularios con gran cantidad de información y carga de archivos. GET es el método más utilizado y debido a su diversidad puede ser aplicado en muchos casos de uso. PUT y DELETE son método derivados de POST y tienen pocas diferencias sin embargo son útiles para darle claridad a los diseños de APIs y flujos de trabajo.

Fetch

Fetch es la propuesta más moderna ante el uso de XMLHttpRequest el cual es el método original para realizar peticiones HTTP. Fetch es más flexible y provee de una estructura más legible para el programador.

Ejemplo:

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response =>{
   if(!response.ok){
     throw new Error('Error:' + response.status);
   })
.then(data =>{
   console.log(data);
})
.catch(error =>{
   console.error('Ha ocurrido un error', error);
   })
});

Formulario HTML

Este formulario será usado para el ejemplo de enviar datos mediante JavaScript:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<form id="form_contacto">
  <div class="form-group row">
    <label for="nombre" class="col-4 col-form-label">nombre</label> 
    <div class="col-8">
      <div class="input-group">
        <div class="input-group-addon">
          <i class="fa fa-address-card"></i>
        </div> 
        <input id="nombre" name="nombre" type="text" class="form-control">
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-4 col-form-label">email</label> 
    <div class="col-8">
      <input id="email" name="email" type="text" class="form-control">
    </div>
  </div>
  <div class="form-group row">
    <label for="tel" class="col-4 col-form-label">teléfono</label> 
    <div class="col-8">
      <input id="tel" name="tel" type="text" class="form-control">
    </div>
  </div> 
  <div class="form-group row">
    <div class="offset-4 col-8">
      <button type="button" onclick="submitForm()">Enviar</button>
    </div>
  </div>
</form>

Como se puede observar el formulario tiene un ID "form_contacto". Esto es necesario para identificarlo dentro de una función de JavaScript.

function submitForm() {
    // Recolectar los valores de los inputs
    const name = document.getElementById('nombre').value;
    const email = document.getElementById('email').value;
    const tel = document.getElementById('tel').value;

    // Crear un objeto con los datos
    const formData = {
        name: name,
        email: email,
        tel: tel
    };

    // Mostrar los valores en un alert
    alert(`Valores recolectados:\nNombre: ${formData.name}\nEmail: ${formData.email}\nTel: ${formData.tel}`);

    // Opcional: Usar Fetch para enviar los datos a un servidor
    fetch('https://ejemplo.com/api/data', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
}

Explicación:

Recolección de datos: La función obtiene los valores de los inputs usando document.getElementById().value.

Mostrar en alert: Los valores se muestran en un alert usando template literals para formatear el mensaje.

Uso de Fetch: La función también incluye código para enviar los datos a un servidor usando Fetch (esto es opcional y puedes quitarlo si solo quieres mostrar el alert).

Aquí puedes ver ele ejemplo en funcionamiento

Formulario con JavaScript

Espero que este tutorial te haya sido de utilidad :D