Aprende los conceptos básicos para usar un formulario en la Web con esta introducción al formulario .
Imagina que quieres preguntarles a las personas en tu sitio web sobre su animal favorito. Como primer paso, necesitas una forma de recopilar los datos.
¿Cómo lo haces 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 de 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 finalización, puedes incluir elementos de formulario como <input> y <textarea>
para diferentes tipos de entradas del usuario.
Obtendrá más información sobre los elementos del 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 envía a la página en la que se muestra el formulario.
Supongamos que desea que una secuencia de comandos se ejecute en https://web.dev.
para procesar los datos del formulario, ¿cómo lo harías?
Pruébalo.
Puedes seleccionar la ubicación de la secuencia de comandos mediante el atributo action.
<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 de example.com puede controlar 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 backend obteniendo los datos de la URL.
Si lo deseas, puedes cambiar el atributo del método para indicarle al formulario que use una solicitud POST.
<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.
Para 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 a tu historial de navegación, tal como se incluyen en la URL.
Los formularios de búsqueda suelen usar esta opción. De esta manera, puedes agregar una página de resultados de búsqueda a favoritos.
Ahora que aprendiste sobre el elemento del formulario en sí, es momento de conocer campos del formulario para que tus formularios sean interactivos.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre el elemento del formulario
¿Cómo se ve la etiqueta de inicio del elemento del formulario?
</form><form>.<form-container><form><form-element>¿Qué atributo puedes usar para definir el lugar en el que se procesa el <form>?
whereactionaction define dónde se procesa el <form>.hrefurl¿Cuál es el método de solicitud predeterminado?
GETPOST