Cómo Conectar formulario HTML con PHP

En este artículo voy a enseñarte de una forma muy práctica a crear un formulario en HTML y seguidamente vamos a pasar la información de este formulario a un documento PHP para poder trabajar con ella.

Creación del formulario en HTML

Para entender mucho mejor todo y los conceptos sean claros, vamos a empezar desde cero un proyecto básico.

Para ello vamos a necesitar de la creación de dos ficheros:

index.html . Será el fichero donde escribiremos el código de nuestro formulario con los campos que queremos que nuestro visitante rellene.

formulario.php . Dentro de este fichero, recogeremos toda la información que ha rellenado el usuario para poder trabajar posteriormente con ella.

Mi recomendación es que para este ejemplo ambos ficheros se encuentren dentro del mismo directorio del proyecto para que de esa forma detectes más rápidamente algún error en el caso de que los hubiera.

Estructura básica del formulario

Para crear un formulario en HTML necesitamos de al menos 3 etiquetas que no pueden faltar: form, los campos que necesitemos que el usuario rellene y por último un botón para enviar esta información.

Para este ejemplo, voy a crear un formulario que recoja el nombre del usuario que se enviará cuando pulse en el botón Enviar.

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="text">
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Añadiendo atributos para usarlos en PHP

Si intentamos ejecutar el formulario anterior, este no funcionará correctamente ya que todavía nos falta añadir los atributos a las etiquetas que hemos utilizados para decirle:

Cuál será el documento PHP que gestionará la información del formulario
Identificar los datos de cada elemento del formulario.
Qué tipo de protocolo utilizará el formulario para realizar el envío.

Entonces, vamos a ir por partes y vamos a desengranar nuestro código hasta que consigamos enlazar nuestro documento HTML con nuestro PHP.

Lo primero que vamos a hacer es identificar los elementos de nuestro formulario para que luego podamos decirle a PHP cuál es el nombre de nuestro usuario o el apellido en caso de que tuviéramos un input para ello.

Para realizar este proceso, necesitamos incorporar en nuestro input un atributo denominado name y escribir entre comillas dobles el nombre que tendrá como identificador nuestro input.

				
					
    <form>
        <input type="text" name="nombre">
        <input type="submit" value="Enviar">
    </form>

Como puedes ver, en la línea 2 he añadido este atributo y le he puesto como valor “nombre”. Es importante que sepas que para estos nombres no puedes utilizar espacios. En caso de necesitar establecerle un nombre largo, te sugiero que utilices el “-“.

Fichero PHP y protocolo que se utilizará

Una vez se hayan establecido los atributos name a nuestros inputs ya estaría preparado nuestro formulario para enviar la información a PHP.

Ahora nos queda decirle a nuestro formulario a que fichero PHP quiere que se le envíe la información que hemos recopilado en los campos para que posteriormente se pueda trabajar con el y el protocolo que se usará.

En nuestro caso, vamos a utilizar el documento formulario.php que te dije al principio de la entrada que crearas y el protocolo get.

No te preocupes por los protocolos, más adelante te explico la diferencia entre ellos. De momento y para hacerlo más fácil vamos a usar get.

Para decirle esto a nuestro formulario, necesitamos usar dos atributos en nuestra etiqueta form:

action. En este atributo indicaremos el fichero de PHP que vamos a enlazar, en nuestro ejemplo formulario.php

method. Aquí tendremos que decirle el protocolo de transmisión que vamos a utilizar, para el ejemplo será get.

El código quedaría de la siguiente forma:

				
					
    <form action="formulario.php" method="get">
        <input type="text" name="nombre">
        <input type="submit" value="Enviar">
    </form>

Protocolo de transmisión GET o POST

Ya tenemos lista la parte de HTML para poder enlazar la información con nuestro PHP, pero si es la primera vez que estás trabajando con formularios, no sabrás muy bien la diferencia que existe entre el protocolo GET o POST.

Antes de continuar, me gustaría que lo entendieras y es por ello que quiero resumirlo en pocas palabras:

GET. Es un protocolo que envía la información del formulario por mediación de una url de forma no cifrada.

Esto quiere decir que, si estamos rellenando información confidencial en nuestro formulario, como puede ser una contraseña, al pulsar sobre enviar datos al formulario esta contraseña será totalmente visible desde la url del navegador.

Cuidado con esto, porque si no tenemos en cuenta esto, la información de nuestro cliente puede verse en peligro.

POST. De lo contrario, post es un protocolo que envía la información cifrada, por lo que es mucho más seguro y la seguridad de nuestro proyecto mejora.

Recibir información del formulario en PHP

Una vez tenemos listo nuestro formulario y sabemos la diferencia que existe entre los dos protocolos de transmisión, ahora vamos a preparar nuestro documento PHP.

Este documento será bastante sencillo, pues lo que queremos es que imprima por pantalla el nombre que el usuario ha escrito en el formulario.

Lo que quiero que sepas, es que cuando envías la información de un formulario en HTML hacia PHP, toda esta información se almacena en un array de una variable reservada del sistema.

En concreto las variables reservadas son $_POST y $_GET seguido y entre corchetes el nombre del input que queramos recuperar, dependiendo del protocolo que hayas indicado en el formulario, deberás de realizar una variable u otra para recuperar los datos.

Como nosotros le habíamos indicado que los datos lo enviaríamos por el protocolo GET, nuestro código quedaría de la siguiente forma:

				
					// Cuando trabajamos con protocolo GET
echo 'El nombre es:'.$_GET['nombre'];

// Cuando trabajamos con protocolo POST
echo 'El nombre es:'.$_POST['nombre'];

Y ya está, si has seguido mis pasos deberías de estar viendo por pantalla el texto “El nombre es nombre del usuario”.

Espero que este pequeño tutorial te haya servido para aclarar tus dudas.

Si quieres dar un paso más y quieres que te enseñe PHP desde cero, puedes acceder a mi formación Programador Sin Límites, donde te enseño todo esto junto con otros lenguajes de programación.

Inscríbete a mi newsletter

Al suscribirte a mi newsletter recibirás un correo con el nuevo contenido que vaya subiendo sobre consejos para desarrolladores web.