Índice
Qué es un Formulario en HTML
Los formularios en HTML son la uno de los elementos principales de interacción de los usuarios con nuestra página web.
Ejemplos de formularios pueden ser tantas ventanas de registro y acceso de usuario en una página web, enviar mensajes en foros, la propia caja de comentarios de YouTube, un registro para la hacienda pública o cuando buscamos cualquier cosa en Google. Todas estas opciones las realizamos a través de formularios.
Esta gran variedad de opciones se debe a que disponemos una amplia gama de elementos que podemos utilizar dentro de nuestro formulario, los cuales podemos ver en el siguiente post(link post)
En este post nos vamos a centrar en cómo funciona un formulario, para ello crearemos un formulario simple y trabajaremos sobre sus opciones.
El funcionamiento principal de un formulario es enviar información al servidor web.
1 – Creación de un formulario HTML
En este ejemplo veremos como hacer un formulario de login a una pagina web. No realizaremos la funcionalidad para comprobar si esa información es correcta, simplemente el funcionamiento del formulario.
Lo primero que tenemos que tener claro, es que, para crear un formulario en HTML, deberemos utilizar la etiqueta <form>
Dentro de esta etiqueta vamos a añadir dos elementos.
Los cuales veremos mas en detalle en el siguiente post o video.
Para ello incluiremos dos campos uno de usuario y otro de contraseña, entraremos mas en detalle en el siguiente video
<form >
<input type="text" name="usuario"/>
<input type="text" name="Pass"/>
<input type="submit" value="Enviar">
</form>
2 – Atributos de un formulario en HTML
Por si sola la etiqueta <form> no sirve de mucho, para que envie información a nuestro servidor debemos indicar ciertos atributos.
2.1 – Atributo action en un formulario HTML
El primero que veremos será el atributo action, el cual nos permite indicar la dirección o página web a la que vamos a enviar la dirección.
<form action="ejemplo.html">
<input type="text" name="usuario"/>
<input type="text" name="Pass"/>
<input type="submit" value="Enviar">
</form>Podemos ignorar el incluir este atributo, y lo que hará será enviar la dirección a la propia página.
2.2 – Atributo enctype en un formulario HTML
Este atributo nos sirve para indicar a nuestro navegador el tipo de encoding que va a tener.
Es un atributo obligatorio de indicar si vamos a incluir imágenes. Por ejemplo, para poner una imagen de perfil en un foro, debemos utilizar un formulario que contenga el atributo enctype con el valor multipart/form-data
<form action="ejemplo.html" enctype="multipart/form-data">
<input type="text" name="usuario"/>
<input type="text" name="Pass"/>
<input type="submit" value="Enviar">
</form>
2.3 – Atributo Method en un formulario HTML
El atributo method nos permite indicar que método HTTP vamos a utilizar para el envió de la información. Por norma general utilizaremos POST ya que es el estándar cuando vamos a enviar información a nuestro servidor web.
<form method="POST" action="ejemplo.html" enctype="multipart/form-data">
<input type="text" name="usuario"/>
<input type="text" name="Pass"/>
<input type="submit" value="Enviar">
</form>Pero tenemos mas opciones como son las siguientes:
- GET: El cual lo utilizamos para consultar información de una página web, Nunca debemos utilizarlo para insertar información o modificarla, sus valores van en la URL y es el de por defecto cuando no indicamos el atributo method.
- POST: Lo utilizamos para enviar información, normalmente para añadir.
- PUT: Lo utilizamos para indicar que lo que enviamos va a modificar el estado actual, lo que seria modificar la información vaya.
- DELETE: indicado para eliminar el recurso que estamos enviando.
Cuando enviamos por diferentes métodos por si solo, no quiere decir nada, ya que el servidor o la aplicación servidor también tiene que tenerlos en cuenta.
Si en el ejemplo anterior cambiamos el método por DELETE pero el servidor no lo tiene implementado. Lo lógico y normal es que el servidor nos indique que ese método no esta soportado por la aplicación. Aunque también puede darse el caso de que nos logue o incluso que nos salga un pete o un 404 si no esta bien implementado.
