La palabra form en inglés se traduce al español como formulario. Así que ya deberías intuir por dónde van los tiros ¿No?
Así es, hoy toca hablar de la etiqueta <form> en HTML.
Si vas a usar esta etiqueta en cualquiera de tus proyectos presta mucha atención, porque esta etiqueta es diferente a todas las que hemos visto hasta ahora.
De hecho, es diferente a la gran mayoría de las etiquetas HTML, porque la etiqueta <form> tiene una peculiaridad: Si no la utilizas correctamente, puedes tener problemas.
Sin ir más lejos, te pueden hackear 🥷🏻 tu página web.
Así que Ojo, mucho cuidado.
Pero, antes de pasar a la acción, recuerda que este capítulo forma parte del diccionario HTML del canal Dropcoding, donde vemos todas y cada una de las etiquetas de este lenguaje.
Y ahora vamos con la etiqueta form.
¿Qué es FORM en HTML?
La etiqueta form en HTML sirve para hacer formularios.
Y algún despistado puede preguntarse ahora: ¿Qué es un formulario?
Tranqui, te lo explico.
Un formulario es una forma de que los usuarios ingresen información en una página web y se envíe a un lugar, por ejemplo, a un email, o que se almacene en una base de datos, o cualquier sitio.
Algunos ejemplos:
- Un formulario de contacto: Para que los usuarios puedan contactar contigo.
- Formulario de registro: Para entrar a un panel de administración.
- Formulario de pedido: para comprar algún producto o servicio.
Atributos de la etiqueta Form
La etiqueta form tiene varios atributos. A continuación te voy a mostrar los principales:
- Action: Especifica la dirección URL del servidor al que se enviarán los datos del formulario.
- Method: Especifica el método HTTP que se utilizará para enviar los datos del formulario. Los métodos más comunes son GET y POST.
- Enctype: Especifica el tipo de contenido de los datos del formulario.
Ejemplo de etiqueta form
Si te fijas, que tenemos aquí dentro del body una etiqueta Form con un formulario. Primero tenemos el atributo Action, que es la URL donde iría tu script para que funcione el formulario.
<form action="https://www.ejemplo.com/submit.php" method="POST">
<label for="name">Nombre:</label>
<input type="text" name="name" id="name">
<label for="email">Correo Electrónico:</label>
<input type="email" name="email" id="email">
<label for="subject">Asunto:</label>
<input type="text" name="subject" id="subject">
<label for="message">Mensaje:</label>
<textarea name="message" id="message"></textarea>
<input type="submit" value="Enviar">
</form>Después tendríamos el Método Post (siempre tiene que ser Post, luego veremos por qué), y acto seguido tenemos todos los input para que el usuario rellene el formulario.
Aquí ingresaría su nombre, su correo electrónico, el asunto, mensaje, y luego tenemos el submit que sería el botón Enviar.
Cuando el usuario rellene todos los campos y le de a Enviar, recibiríamos esta información.
Este sería el formulario típico de contacto.
Recomendaciones
Lo que te voy a explicar a continuación no son solo recomendaciones, sino que son cosas importantísimas que has de tener en cuenta a la hora de usar la etiqueta Form para crear tus formularios.
Has de tener en cuenta dos cosas.
Bueno, has de tener en cuenta más cosas… pero principalmente estas dos que te voy a contar:
Proteger los datos de tu formulario
Para ello utiliza el Method POST ¡SIEMPRE!
Si no lo haces y utilizas el Method Get, los datos del formulario se podrán ver en la URL. Imagínate si tienes que poner alguna contraseña o información sensible … ¡Sería una fiesta! Recuerda, siempre el método POST.
Validación de formularios
Los formularios son el objetivo de la mayoría de ataques a tu página web, así que debes validarlos.
Hazlo siempre del lado del servidor, por ejemplo con php o cualquier otro lenguaje del lado del servidor, del backend.
Aquí no vale hacerlo solo con HTML, no vale hacer un required y ya está, tienes que validarlo con ese lenguaje del lado del servidor.
Espero que te haya servido esta lección del diccionario HTML. Recuerda que si tienes cualquier pregunta o alguna sugerencia, la puedes dejar en los comentarios. No seas tímido.
Adiós.