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.

¿Debes usar un elemento <form>?

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 de 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 deseas evitar que se vuelva a cargar una página cuando un usuario envía un formulario, aún puedes usar el elemento <form>, pero mejóralo con JavaScript

¿Cómo funciona <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 de controles de formularios 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 un GET. o POST según el atributo method. Si no hay ningún atributo method, se muestra un 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 manejar los datos enviados en el frontend mediante una solicitud GET. o por código en el backend mediante una solicitud GET o POST. Obtén más información sobre tipos de solicitud y cómo transferir 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 la función de autocompletar (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 debe ser /color.

<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 del 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 gráfico Enviar. Sin embargo, ahora que puedes crear botones gráficos con CSS, no se recomienda usar type="image".

Permitir que los usuarios envíen archivos

Utiliza <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 debe realizar un cambio más para garantizar que los usuarios puedan subir archivos. 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 los archivos se puedan enviar, 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

Recursos

• El elemento HTML del formulario
• Prácticas recomendadas para el botón Enviar