Usa formularios para obtener datos de los usuarios

Aprende los conceptos básicos para usar un formulario en la Web con esta introducción al elemento del formulario.

Imagina que quieres preguntarle a las personas en tu sitio web sobre su animal favorito. Como primer paso, necesitas una forma de recopilar los datos.

¿Cómo se hace con HTML?

En HTML, puedes compilar esto con el elemento de formulario (<form>), un <input> con un <label> y un <button> de envío.

¿Qué es un elemento de formulario?

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

El elemento del formulario consta de la etiqueta de inicio <form>, atributos opcionales definidos en la etiqueta de inicio y una etiqueta de finalización </form>.

Entre la etiqueta de inicio y la de final, puedes incluir elementos de formulario, como <input> y <textarea>, para diferentes tipos de entrada del usuario. Obtendrás más información sobre los elementos de formulario en el próximo módulo.

¿Dónde se procesan los datos?

Cuando se envía un formulario (por ejemplo, cuando el usuario hace clic en el botón Enviar), el navegador realiza una solicitud. Una secuencia de comandos puede responder a esa solicitud y procesar los datos.

De forma predeterminada, la solicitud se realiza a la página en la que se muestra el formulario.

Supongamos que quieres que una secuencia de comandos que se ejecute en https://web.dev procese los datos del formulario. ¿Cómo lo harías? Pruébala.

<form action="https://example.com/animals">
...
</form>

En el ejemplo anterior, se realiza una solicitud a https://example.com/animals. Una secuencia de comandos en el backend example.com puede controlar solicitudes a /animals y procesar datos del formulario.

¿Cómo se transfieren los datos?

De forma predeterminada, los datos del formulario se envían como una solicitud GET, con los datos enviados adjuntos a la URL. Si un usuario envía 'rana' en el ejemplo anterior, el navegador envía una solicitud a la siguiente URL:

https://example.com/animals?animal=frog

En este caso, puedes acceder a los datos en el frontend o el backend si obtienes los datos de la URL.

Si lo deseas, puedes indicarle al formulario que use una solicitud POST cambiando el atributo del método.

<form method="post">
...
</form>

Con POST, los datos se incluyen en el cuerpo de la solicitud.

Los datos no serán visibles en la URL y solo se podrá acceder a ellos desde una secuencia de comandos de frontend o backend.

¿Qué método deberías usar?

Hay casos de uso para ambos métodos.

En los formularios que procesan datos sensibles, usa el método POST. Los datos están encriptados (si usas HTTPS) y solo se puede acceder a ellos mediante la secuencia de comandos de backend que procesa la solicitud. Los datos no se pueden ver en la URL. Un ejemplo común es un formulario de acceso.

Si los datos se pueden compartir, puedes usar el método GET. De esta manera, los datos se agregarán al historial del navegador cuando se incluyan en la URL. Los formularios de búsqueda suelen usar esto. De esta manera, puedes agregar a favoritos una página de resultados de búsqueda.

Ahora que conoces el elemento del formulario, es hora de conocer los campos de formulario para que tus formularios sean interactivos.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el elemento del formulario

Recursos

El elemento <form>.