¿Cómo se envían los datos a través de los formularios HTML?

El formulario es un elemento básico para recoger los datos que nos interesan de los usuarios. A simple vista de usuario, el funcionamiento de un formulario es muy sencillo: rellenamos los datos y clickamos en el botón de «Enviar» pero… ¿Qué ocurre realmente detrás de este botón? 😀

Formularios HTML

Para la creación de un formulario HTML necesitamos utilizar el tag <form> . Dentro de este elemento, los atributos que cobran mayor importancia son los atributos action y method, ya que estos van a ser los que determinar hacia dónde y cómo se dirigen los datos de nuestro formulario.

• Action: Este atributo concreta hacia dónde dirigimos los datos que acabamos de recopilar en el formulario. Podemos indicarle una acción directa, como por ejemplo enviar los datos directamente a un correo electrónico, o bien podemos trasladar estos datos a un programa específico del servidor que hayamos creado para gestionar estos datos. Por ejemplo, podríamos dirigir los datos recogidos en el formulario a un fichero PHP que utilicemos como gestor de estos datos (más adelante especifico cómo).

• Method: Por otro lado, el atributo method especifica el modo en el que los datos van a ser enviados. Aquí podemos especificar GET o POST. Si elegimos la primera opción, los datos se enviarán al servidor a través de la URL, por lo que los datos son visibles y por tanto, no debemos utilizar nunca este método para información sensible😱. El método POST, transfiere los datos del formulario de forma no visible al usuario por lo que es el método adecuado para la información más sensible y privada.

Para ejecutar estas directivas del formulario y que se haga efectivo la transmisión de los datos, necesitamos un botón de tipo «submit». Una vez que el usuario haga click en este botón, el navegador se encargará de transferir estos datos al servidor de la forma que hayamos especificado.

Un formulario básico podría ser:

<form name="formulario_ejemplo" action ​="datos_formulario.php" method="post">
    Nombre: <input type="text" name="nombre" value=""><br>
    Email: <input type="text" name="email" value=""><br>
    <input type="submit" value="Enviar">
</form>

PHP y los formularios

Para ejemplificar el caso, pongamos que disponemos de un programa específico en nuestro servidor programado con PHP (se podría utilizar cualquier otro lenguaje de servidor).

En el momento en el que los datos llegan a este fichero, entran en juego los objetos $_GET y $_POST, que son dos variables del método HTTP, y como podréis intuir, utilizar uno u otro va a depender del method que hayamos definido en nuestro formulario HTML.

• El objeto $_POST: Este vector asociativo recoge todos los valores que el usuario ha introducido en el formulario y que han sido transferidos de forma no visible en la URL (a diferencia del método GET).

• El objeto $_GET: Sería el encargado de recoger los datos del formulario cuando se utiliza el método de envío GET. En este caso, los datos que se envían son visibles en la URL.

Ambos vectores almacenan los datos en forma de clave/valor.

Ejemplificando con un envío de datos GET, la URL generada con el envío de los datos podría ser algo así:

www.web.com/formulario?clave1=valor1&clave2=valor2

En este caso, podríamos acceder al vector GET y por tanto, a los valores del formulario almacenados, así:

$_GET["clave1"] // nos devolvería el valor1

Aclarando esto aún más, tenemos que tener en cuenta que la clave se corresponden con el atributo «name» de los campos en el formulario HTML. Por otro lado, el valor se corresponde con el «value» del campo, que es el valor introducido por el usuario en ese campo concreto del formulario. Es decir, en nuestro formulario de ejemplo, si enviamos los datos por GET, la URL que se genera sería:

www.web.com/formulario?nombre=alex&email=correo

De este modo, el vector $_GET quedaría:

$_GET["nombre"]  // nos devuelve "alex"
$_GET["email"]  // nos devuelve "correo"

¿Qué podemos hacer con los datos del formulario?

Pues bien, dos acciones que podemos hacer con los datos enviados a través del formulario pueden ser el envío de un correo electrónico con los datos recogidos o la creación de una base de datos de clientes, tipo CRM.

• Correo electrónico: Imaginemos una web con la típica sección de contacto. Una opción podría ser enviarnos un correo electrónico con los datos recogidos en el formulario de contacto para que estemos al tanto de las peticiones de nuestros usuarios. Para ello, contamos con un sencillo método PHP que es mail(). Este método requiere de una serie de parámetros de tipo cadena. que básicamente especifican la dirección de correo a la que enviar el mensaje, el asunto del mail y el cuerpo del mensaje. Una forma de hacerlo sería recoger los datos en variables PHP a través del vector $_GET o $_POST (incluso el objeto genérico $_REQUEST) y utilizar estas variables para generar el cuerpo del correo electrónico que nos llegaría cuando el formulario se envíe.

Ejemplo:

//Creamos las variables donde almacenamos los datos del formulario y las formateamos correctamente
$nombre = strip_tags(htmlspecialchars($_POST['nombre']));
$email = strip_tags(htmlspecialchars($_POST['email']));
$telefono = strip_tags(htmlspecialchars($_POST['telefono']));
$mensaje = strip_tags(htmlspecialchars($_POST['mensaje']));


//Utilizamos estas variables para generar el correo electrónico
$to = "tu_correo_electronico@dominio.com"; 
$subject = "Formulario web:  $name";
$body = "Alguien quiere contactar contigo .\n\n"."Aquí tienes los detalles del mensaje:\n\n 
Nombre: $nombre \n\n
Email: $email \n\n
Telefono: $telefono \n\n
Mensaje: $mensaje";
 
//invocamos el método mail() con sus correspondientes parámetros para enviar el correo según los datos recibidos
mail($to, $subject, $body)

• Bases de datos: Otro tratamiento de los datos podría ser utilizarlos para crear una base de datos propia. Imaginemos que disponemos de una base de datos MySQL. Con PHP podríamos generar una conexión con nuestra base de datos y hacer una petición de tipo INSERT para insertar en los campos correspondientes de la tabla, los valores que los usuarios han introducido en el formulario. Esto es algo más complejo así que lo podemos dejar para un post propio😉

Espero que hayáis aprendido algo conmigo! 😜