Ya vimos que cuando un cliente se comunica con un servidor web, lo hace a través de una petición HTTP. Pero esta petición puede ser de distintos tipos o verbos. Esto ayuda al servidor a entender que clase de operación se está solicitando.
Por ejemplo, cuando entramos a un sitio web, el navegador realiza una petición
de tipo GET. Las peticiones de tipo GET son las más comunes y se utilizan
para traernos información del servidor. En este caso los archivos de hipertexto,
imágenes, videos, etc, que necesitamos para visualizar la página.
Cuando enviamos un formulario, por lo general, lo que queremos no es traer datos, sino
crearlos. En este caso el verbo más adecuado para crear un nuevo recurso es el verbo POST.
Para enviar datos del formulario al servidor, necesitamos usar el verbo POST.
Para esto, en el formulario, debemos especificar el atributo method con el valor POST.
<form method="POST">
<label for="nombre"> Nombre </label>
<input id="nombre" type="text" />
</form>
Otra cosa importante es añadir un atributo name a los elementos del formulario.
Esto es necesario para que el servidor pueda identificar los datos que estamos enviando.
<form method="POST">
<label for="nombre"> Nombre </label>
<input id="nombre" name="nombre" type="text" />
</form>
Si te das cuenta, no tenemos ningún botón de enviar en el formulario. Solucionemos esto
añadiendo un input de tipo submit.
<form method="POST">
<label for="nombre"> Nombre </label>
<input id="nombre" name="nombre" type="text" />
<input type="submit" value="Enviar" />
</form>
El último paso, es indicarle al formulario a donde queremos enviar los datos. Para esto
usamos el atributo action.
<form method="POST" action="/ruta/del/servidor">
<label for="nombre"> Nombre </label>
<input id="nombre" name="nombre" type="text" />
<input type="submit" value="Enviar" />
</form>
Por ejemplo, realiza una petición a mi servidor y te enviaré un mensaje de vuelta.
Te dejo un reto, intenta enviar un formulario a mi servidor dejando el campo de nombre vacío.
Como ves, no te ha dejado enviar el formulario. Esto es porque le he añadido un atributo especial
Este atributo se añade a los elementos del formulario y le indica al navegador que ese campo es obligatorio. Si intentas enviar el formulario sin llenar ese campo, el navegador te mostrará un mensaje de error.
<form method="POST" action="/ruta/del/servidor">
<label for="nombre"> Nombre </label>
<input id="nombre" name="nombre" type="text" required />
<input type="submit" value="Enviar" />
</form>
Este atributo se añade a los elementos del formulario y le indica al navegador que ese campo debe tener un valor mínimo o máximo. Si intentas enviar el formulario con un valor fuera de ese rango, el navegador te mostrará un mensaje de error.
<form method="POST" action="/ruta/del/servidor">
<label for="edad"> Edad </label>
<input id="edad" name="edad" type="number" min="18" max="100" required />
<input type="submit" value="Enviar" />
</form>
Este atributo se añade a los elementos del formulario y le indica al navegador que ese campo debe tener un número mínimo o máximo de caracteres. Si intentas enviar el formulario con un valor fuera de ese rango, el navegador te mostrará un mensaje de error.
<form method="POST" action="/ruta/del/servidor">
<label for="nombre"> Nombre </label>
<input
id="nombre"
name="nombre"
type="text"
minlength="3"
maxlength="10"
required
/>
<input type="submit" value="Enviar" />
</form>
Ten en cuenta, que esto solo se debería usar para mejorar la experiencia del usuario. No debes confiar en esto como única medida de seguridad ya que, cualquier validación realizada desde el lado del cliente, es decir, el navegador, puede ser fácilmente modificada por un usuario malintencionado.
Cuando llegue el momento correcto, veremos como validar los datos del formulario desde el servidor.
En el siguiente capítulo veremos las etiquetas contenedoras en HTML.