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.

¿Deberías usar un elemento <form>?

Navegadores compatibles

  • 1
  • 12
  • 1
  • 1

Origen

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 funcionalidades integradas en los navegadores que, de otro modo, tendrías que compilar por tu cuenta. Un <form> también tiene muchas funciones de accesibilidad integradas de forma predeterminada. Si quieres evitar que se vuelva a cargar la página cuando un usuario envíe 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. Es posible que te preguntes cómo funciona un formulario.

<form> es un contenedor de controles interactivos de formularios.

<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 de <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? Los datos enviados se pueden controlar con JavaScript en el frontend mediante una solicitud GET o con un código en el backend con una solicitud GET o POST. Obtén más información sobre los tipos de solicitud 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 utiliza 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), se debe usar el autocompletado (autocomplete="off") o qué codificación se debe usar (accept-charset).

Intenta crear un formulario donde 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 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 el 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 del formulario. Siempre y cuando no uses type="button", funcionará como 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 gráfico Submit. 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.

Debes realizar un cambio más para garantizar que los usuarios puedan subir archivos. Para ello, configura 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, no se pueden enviar archivos con una solicitud POST.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el elemento del 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 una <button>.
Vuelve a intentarlo.
Presiona Enter.
Vuelve a intentarlo.
Haz clic en un <input type="image">.
Vuelve a intentarlo.
Todas las opciones anteriores.
🎉

Recursos