Descripción detallada del elemento del formulario

En un módulo anterior, aprendiste a usar el elemento <form>. En este módulo, aprenderás cómo funciona un formulario y cuándo usarlo.

¿Debo usar un elemento <form>?

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

No siempre es necesario colocar controles de formulario en un elemento <form>. Por ejemplo, puedes proporcionar un elemento <select> para que los usuarios elijan una categoría de producto. No necesitas un elemento <form> aquí, ya que no almacenas ni procesas datos en tu backend.

Sin embargo, en la mayoría de los casos, cuando almacenas o procesas datos de los usuarios, debes usar el elemento <form>. Como aprenderás en este módulo, usar un <form> te brinda muchas funciones integradas de los navegadores que, de otro modo, tendrías que crear por tu cuenta. Un <form> también tiene muchas funciones de accesibilidad integradas de forma predeterminada. Si quieres evitar que se vuelva a cargar una página cuando un usuario envía un formulario, puedes usar el elemento <form>, pero mejorarlo con JavaScript.

¿Cómo funciona un <form>?

Aprendiste que un <form> es la mejor manera de controlar los datos del usuario. Ahora te preguntarás cómo funciona un formulario.

<form> es un contenedor para controles de formulario interactivos.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

¿Cómo funciona el envío de formularios?

Cuando envías un <form>, el navegador verifica los atributos <form>. Los datos se envían como una solicitud GET o POST según el atributo method. Si no hay ningún atributo method, se realiza una solicitud GET a la URL de la página actual.

¿Cómo puedes acceder a los datos del formulario y procesarlos? JavaScript puede controlar los datos enviados en el frontend con una solicitud GET o con código en el backend con una solicitud GET o POST. Obtén más información sobre los tipos de solicitudes y la transferencia de datos de formularios.

Cuando se envía el formulario, el navegador realiza una solicitud a la URL que es el valor del atributo action. Además, el navegador verifica si el botón Enviar tiene un atributo formaction. Si este es el caso, se usa la URL definida allí.

Además, el navegador busca atributos adicionales en el elemento <form>, por ejemplo, para decidir si se debe validar el formulario (novalidate), si se debe usar la función de autocompletado (autocomplete="off") o qué codificación se debe usar (accept-charset).

Intenta crear un formulario en el que los usuarios puedan enviar su color favorito. Los datos se deben enviar como una solicitud POST, y la URL en la que se procesarán los datos debe ser /color.

Mostrar formulario

Una solución posible es usar este formulario:

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

Asegúrate de que los usuarios puedan enviar tu formulario

Existen dos maneras de enviar un formulario. Puedes hacer clic en el botón Enviar o presionar Enter mientras usas cualquier control de formulario.

Puedes agregar un botón Enviar de varias maneras. Una opción es usar un elemento <button> dentro de tu formulario. Siempre que no uses type="button", funcionará como un botón Enviar. Otra opción es usar <input type="submit" value="Submit">.

Una tercera opción es usar <input type="image" alt="Submit" src="submit.png"> para crear un botón Enviar gráfico. Sin embargo, ahora que puedes crear botones gráficos con CSS, no se recomienda usar type="image".

Permite que los usuarios envíen archivos

Usa <input type="file"> para permitir que las personas suban y envíen archivos si es necesario.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

Primero, agrega un elemento <input> con type="file" a tu formulario. Agrega el atributo multiple si los usuarios deben poder subir varios archivos.

Se necesita un cambio más para garantizar que los usuarios puedan subir archivos: establece el atributo enctype en tu formulario. El valor predeterminado es application/x-www-form-urlencoded.

<form method="post" enctype="multipart/form-data">
…
</form>

Para asegurarte de que se puedan enviar los archivos, cámbialo a multipart/form-data. Sin esta codificación, los archivos no se pueden enviar con una solicitud POST.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre el elemento de formulario

¿Qué valor de enctype se necesita para enviar archivos?

multipart/form-data
🎉
multipart/form-files
Vuelve a intentarlo.
form-data
Vuelve a intentarlo.
form-files
Vuelve a intentarlo.

¿Es posible enviar datos del usuario sin un <form>?

No
Vuelve a intentarlo.
Sí, con JavaScript.
🎉
Sí, con Flash.
Vuelve a intentarlo.
Sí, con HTML5.
Vuelve a intentarlo.

¿Cómo puedes enviar un <form>?

Haz clic en un <button>.
Vuelve a intentarlo.
Presiona Enter.
Vuelve a intentarlo.
Haz clic en un <input type="image">.
Vuelve a intentarlo.
Todas las anteriores.
🎉

Recursos