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 form.

Imagina que quieres preguntarles a las personas que visitan tu sitio web cuál es su animal favorito. Como primer paso, necesitas una forma de recopilar los datos.

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

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

¿Qué es un elemento de formulario?

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

Entre las etiquetas de inicio y cierre, 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 se ejecute una secuencia de comandos en https://web.dev para procesar los datos del formulario. ¿Cómo lo harías? Pruébalo en CodePen.

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

En el ejemplo anterior, se realiza una solicitud a https://example.com/animals. Un script en el backend de example.com puede controlar las solicitudes a /animals y procesar los 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 anexados a la URL. Si un usuario envía "rana" en el ejemplo anterior, el navegador realiza 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 obteniéndolos 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 un script de frontend o backend.

¿Qué método deberías usar?

Existen casos de uso para ambos métodos.

Para los formularios que procesan datos sensibles, usa el método POST. Los datos se encriptan (si usas HTTPS) y solo son accesibles para la secuencia de comandos de backend que procesa la solicitud. Los datos no son visibles en la URL. Un ejemplo común es un formulario de acceso.

Si los datos se pueden compartir, puedes usar el método GET. Luego, los datos se agregan al historial del navegador, ya que se incluyen en la URL. Los formularios de búsqueda suelen usar esta opción. Esto te permite marcar como favorito una página de resultados de búsqueda.

Ahora que aprendiste sobre el elemento del formulario en sí, es hora de conocer los campos del formulario para que tus formularios sean interactivos.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el elemento de formulario

Recursos

El elemento <form>.