Skip to content

2.4 Formularios HTML y Procesamiento con PHP

2.4 Formularios HTML y Procesamiento con PHP

Enunciado general:

En esta sección aprenderemos cómo trabajar con formularios HTML y cómo procesar los datos recibidos en un servidor PHP. Los formularios son esenciales en el desarrollo de aplicaciones web interactivas, ya que permiten a los usuarios enviar información al servidor. Veremos los métodos de envío de datos (GET y POST), cómo validarlos y sanitizarlos para asegurar que la información que recibimos es correcta y segura. Al final de este tema, serás capaz de crear formularios HTML y procesar correctamente sus datos utilizando PHP.

Objetivos del punto 2.4:

  1. Método GET vs POST: Comprenderemos las diferencias entre estos dos métodos y cuándo usarlos en nuestros formularios.
  2. Validación básica de entradas: Implementaremos técnicas para asegurarnos de que los datos proporcionados por los usuarios son correctos.
  3. Uso de $_GET, $_POST, $_REQUEST: Aprenderemos a acceder a los datos enviados desde los formularios.
  4. Sanitización de datos: Veremos cómo limpiar los datos recibidos para evitar riesgos de seguridad, como inyección de código.
  5. Ejercicios prácticos: Crearemos formularios comunes, como un formulario de contacto y un formulario de acceso, con su respectivo procesamiento en PHP.

1. Método GET vs POST

Enunciado:

Existen dos métodos principales para enviar datos a través de un formulario HTML: GET y POST. Cada uno tiene sus características y casos de uso, y entender sus diferencias es esencial para saber cuándo usarlos.

  • GET: Los datos del formulario se envían como parte de la URL. Es adecuado para solicitudes que no requieren seguridad, como búsquedas. Tiene un límite en el tamaño de los datos que se pueden enviar, ya que los datos forman parte de la URL.

  • POST: Los datos del formulario se envían en el cuerpo de la solicitud HTTP. Es adecuado para formularios que envían información sensible (como contraseñas) o grandes volúmenes de datos.

Uso en HTML:

Ejemplo de formularios HTML con GET y POST
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!-- Ejemplo de formulario usando el método GET -->
<form action="procesar.php" method="get">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre">
    <input type="submit" value="Enviar">
</form>

<!-- Ejemplo de formulario usando el método POST -->
<form action="procesar.php" method="post">
    <label for="email">Email:</label>
    <input type="text" id="email" name="email">
    <input type="submit" value="Enviar">
</form>

2. Validación básica de entradas en PHP

PHP ofrece una serie de filtros muy útiles para validar y sanitizar datos recibidos de formularios. El filtro más utilizado es FILTER_VALIDATE_EMAIL, que se usa para validar una dirección de correo electrónico, pero hay muchos más filtros disponibles que pueden validarse para distintos tipos de datos.

Tabla de filtros disponibles en PHP

Filtro Tipo de Validación Descripción Formato del campo para pasar el filtro ¿Usa expresiones regulares?
FILTER_VALIDATE_EMAIL Validación de correo Verifica si el valor es una dirección de correo electrónico válida. Una dirección de correo electrónico válida (ej. usuario@dominio.com) Sí
FILTER_VALIDATE_URL Validación de URL Verifica si el valor es una URL válida. Una URL válida (ej. http://www.ejemplo.com) Sí
FILTER_VALIDATE_IP Validación de IP Verifica si el valor es una dirección IP válida. Una dirección IP válida (IPv4 o IPv6) Sí
FILTER_VALIDATE_INT Validación de entero Verifica si el valor es un número entero. Un número entero (ej. 123) No
FILTER_VALIDATE_BOOLEAN Validación de booleano Verifica si el valor es un valor booleano (1, 0, "1", "0", "true", "false"). "true", "false", "1", "0" No
FILTER_VALIDATE_FLOAT Validación de flotante Verifica si el valor es un número flotante. Un número flotante (ej. 10.5) No
FILTER_VALIDATE_REGEXP Validación de expresión regular Permite validar usando una expresión regular definida por el usuario. Cualquier valor que cumpla la expresión regular Sí
FILTER_VALIDATE_URL Validación de URL Verifica si el valor es una URL válida con formato adecuado. Una URL válida (ej. http://www.example.com) Sí
FILTER_SANITIZE_EMAIL Sanitización de correo Elimina todos los caracteres no permitidos en una dirección de correo electrónico. Un correo electrónico (ej. user@example.com) No
FILTER_SANITIZE_URL Sanitización de URL Elimina todos los caracteres no permitidos en una URL. Una URL válida. (ej. http://example.com) No
FILTER_SANITIZE_STRING Sanitización de texto Elimina las etiquetas HTML y PHP de un string. Un texto sin etiquetas HTML o PHP No
FILTER_SANITIZE_NUMBER_INT Sanitización de enteros Elimina todos los caracteres que no sean números enteros. Números enteros (ej. 123456) No
FILTER_SANITIZE_NUMBER_FLOAT Sanitización de flotantes Elimina todos los caracteres que no sean números flotantes. Números flotantes (ej. 123.45) No

Explicación de algunos filtros:

  • FILTER_VALIDATE_EMAIL: Este filtro verifica si el valor recibido es una dirección de correo electrónico válida. Para ser válida, la dirección debe tener el formato adecuado, como usuario@dominio.com.

  • FILTER_VALIDATE_URL: Este filtro valida una URL. Para pasar este filtro, la URL debe comenzar con http:// o https:// y debe seguir el formato adecuado de una URL.

  • FILTER_VALIDATE_IP: Verifica que el valor proporcionado sea una dirección IP válida. Puede ser una dirección IPv4 (ej. 192.168.1.1) o una IPv6 (ej. 2001:0db8:85a3:0000:0000:8a2e:0370:7334).

  • FILTER_VALIDATE_INT: Este filtro valida si el valor recibido es un número entero. Para ser válido, debe ser un número sin decimales (ej. 123 o -500).

  • FILTER_VALIDATE_BOOLEAN: El filtro booleano permite validar si el valor es uno de los valores aceptados como verdadero o falso, como "true", "false", "1", "0", etc.

  • FILTER_VALIDATE_REGEXP: Este filtro utiliza expresiones regulares (regex) para validar el valor ingresado. Puedes proporcionar tu propia expresión regular para definir los criterios que deben cumplir los datos.

Ejemplo práctico de uso de filtros en PHP:

A continuación, te presento ejemplos de cómo usar algunos de estos filtros para validar y sanitizar datos de formularios:

Validación de datos con filtros en PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
// Recibiendo datos del formulario
$email = $_POST['email'];
$url = $_POST['url'];
$ip = $_POST['ip'];
$edad = $_POST['edad'];

// Validando el email
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo "Correo electrónico válido: " . $email . "<br>";
} else {
    echo "Correo electrónico no válido.<br>";
}

// Validando la URL
if (filter_var($url, FILTER_VALIDATE_URL)) {
    echo "URL válida: " . $url . "<br>";
} else {
    echo "URL no válida.<br>";
}

// Validando la IP
if (filter_var($ip, FILTER_VALIDATE_IP)) {
    echo "IP válida: " . $ip . "<br>";
} else {
    echo "IP no válida.<br>";
}

// Validando un entero
if (filter_var($edad, FILTER_VALIDATE_INT)) {
    echo "Edad válida: " . $edad . "<br>";
} else {
    echo "Edad no válida.<br>";
}
?>

Sanitización de datos:

Aparte de la validación, también es muy importante sanitizar los datos para eliminar cualquier carácter no deseado o potencialmente peligroso (como los tags HTML). A continuación, verás un ejemplo de cómo sanitizar los datos recibidos.

Sanitización de datos en PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?php
// Sanitizando el email
$email_sanitizado = filter_var($email, FILTER_SANITIZE_EMAIL);

// Sanitizando la URL
$url_sanitizada = filter_var($url, FILTER_SANITIZE_URL);

// Sanitizando el nombre (eliminando etiquetas HTML)
$nombre_sanitizado = filter_var($nombre, FILTER_SANITIZE_STRING);

echo "Email sanitizado: " . $email_sanitizado . "<br>";
echo "URL sanitizada: " . $url_sanitizada . "<br>";
echo "Nombre sanitizado: " . $nombre_sanitizado . "<br>";
?>

Conclusión

PHP ofrece una amplia gama de filtros de validación y sanitización para asegurarse de que los datos que los usuarios envían a través de formularios son válidos y seguros. Es fundamental que los desarrolladores comprendan estos filtros y los apliquen correctamente para proteger las aplicaciones web de entradas maliciosas o incorrectas.

En este punto, hemos cubierto:

  • Diferentes filtros de validación que pueden usarse para validar direcciones de correo, URL, IPs, enteros, y más.
  • La importancia de sanitizar los datos antes de utilizarlos, especialmente en aplicaciones web, para evitar ataques de inyección o errores de formato.

3. Uso de $_GET, $_POST, $_REQUEST

Enunciado:

En PHP, los datos enviados a través de un formulario HTML se pueden acceder usando las superglobales $_GET o $_POST. Dependiendo del método de envío elegido (GET o POST), PHP llenará estas superglobales con los datos correspondientes.

  • $_GET: Utilizado cuando el formulario usa el método GET. Los datos se incluyen en la URL de la solicitud.

  • $_POST: Utilizado cuando el formulario usa el método POST. Los datos se envían en el cuerpo de la solicitud HTTP.

  • $_REQUEST: Contiene los datos de $_GET, $_POST y $_COOKIE. Es una forma general de acceder a los datos, pero no es la más segura.

Ejemplo de uso:

Acceso a datos de formularios en PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<?php
// Usando $_GET
if (isset($_GET['nombre'])) {
    echo "Nombre recibido por GET: " . $_GET['nombre'];
}

// Usando $_POST
if (isset($_POST['email'])) {
    echo "Email recibido por POST: " . $_POST['email'];
}

// Usando $_REQUEST (puede contener tanto GET como POST)
if (isset($_REQUEST['nombre'])) {
    echo "Nombre recibido por REQUEST: " . $_REQUEST['nombre'];
}
?>

4. Sanitización de datos

La sanitización de datos es crucial para proteger las aplicaciones web de ataques como la inyección de código. Sanitizar significa limpiar los datos para que no contengan código malicioso, especialmente cuando estos se van a mostrar en la página web o se van a usar en consultas de bases de datos.

En PHP, puedes usar funciones como filter_var() para limpiar datos antes de utilizarlos.

Ejemplo de sanitización:

Sanitización de datos en PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $nombre = $_POST['nombre'];

    // Sanitizar el nombre para evitar caracteres no deseados
    $nombre = filter_var($nombre, FILTER_SANITIZE_STRING);

    // Validar y sanitizar email
    $email = $_POST['email'];
    $email = filter_var($email, FILTER_SANITIZE_EMAIL);

    // Imprimir los datos sanitizados
    echo "Nombre: " . $nombre . "<br>";
    echo "Email: " . $email;
}
?>

5. Ejercicios prácticos

Formulario de contacto

Enunciado: Crea un formulario de contacto con los siguientes campos: Nombre, Email, y Mensaje. Valida que el nombre no esté vacío, que el email sea válido y que el mensaje tenga al menos 10 caracteres.

Solución
Formulario de contacto
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<form action="procesar_contacto.php" method="post">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <br>
    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="mensaje"></textarea>
    <br>
    <input type="submit" value="Enviar">
</form>
Procesamiento del formulario de contacto
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $nombre = $_POST['nombre'];
    $email = $_POST['email'];
    $mensaje = $_POST['mensaje'];

    // Validación
    if (empty($nombre)) {
        echo "El nombre es obligatorio.";
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "El correo electrónico no es válido.";
    } elseif (strlen($mensaje) < 10) {
        echo "El mensaje debe tener al menos 10 caracteres.";
    } else {
        echo "Formulario enviado correctamente.";
    }
}
?>

Formulario de acceso

Enunciado: Crea un formulario de acceso con los siguientes campos: Usuario y Contraseña. Validar que el usuario no esté vacío y que la contraseña tenga al menos 6 caracteres.

Solución
Formulario de acceso
1
2
3
4
5
6
7
8
9
<form action="procesar_acceso.php" method="post">
    <label for="usuario">Usuario:</label>
    <input type="text" id="usuario" name="usuario">
    <br>
    <label for="contrasena">Contraseña:</label>
    <input type="password" id="contrasena" name="contrasena">
    <br>
    <input type="submit" value="Acceder">
</form>

```php linenums="1" title="Procesamiento del formulario de acceso"> <?php if ($_SERVER["REQUEST_METHOD"] == "POST") { $usuario = $_POST['usuario']; $contrasena = $_POST['contrasena'];

// Validación
if (empty($usuario)) {
    echo "El usuario es obligatorio.";
} elseif (strlen($contrasena) < 6) {
    echo "La contraseña debe tener al menos 6 caracteres.";
} else {
    echo "Acceso permitido.";
}

} ?> ```

6. Ejercicio completo: Validación de Datos en el Servidor con PHP

En este ejercicio, vamos a trabajar con un formulario HTML que pedirá los siguientes campos:

  • Nombre (de 4 a 50 caracteres)
  • Fecha de nacimiento
  • Correo electrónico (con validación del formato de correo)
  • Confirmación de correo (debe coincidir con el correo electrónico)
  • DNI (validación del formato español)
  • Teléfono (9 dígitos numéricos)
  • Contraseña (con validación de formato)
  • Confirmación de la contraseña (debe coincidir con la contraseña introducida)

Requisitos:

  • El formulario NO tendrá validaciones HTML, solo en PHP.
  • Todos los campos son obligatorios.
  • La sanitización de los datos debe aplicarse a todos los campos antes de procesarlos.

Objetivo del ejercicio:

  1. Mostrar el formulario: La primera vez que se cargue la página, se deberá mostrar el formulario HTML vacío.
  2. Validación de datos: Cuando el formulario sea enviado, se validarán los datos introducidos. Si hay errores, se mostrará un div rojo sobre el formulario que contenga los mensajes de error para cada campo.
  3. Repetir el proceso hasta que los datos sean válidos: Si algún campo tiene un error, el formulario se volverá a mostrar con los datos introducidos previamente (excepto las contraseñas), y los errores serán indicados en rojo.
  4. Confirmación de éxito: Cuando todos los datos sean válidos, se mostrará un mensaje indicando que los datos han sido procesados correctamente.

Campos y Validaciones:

  1. Nombre:

    • Longitud mínima: 4 caracteres.
    • Longitud máxima: 50 caracteres.
    • Es obligatorio.

  2. Fecha de nacimiento:

    • Debe tener el formato YYYY-MM-DD.
    • Es obligatorio.

  3. Correo electrónico:

    • Debe tener formato de correo electrónico válido.
    • Es obligatorio.

  4. Confirmación de correo:

    • Debe coincidir con el campo de correo electrónico.
    • Es obligatorio.

  5. DNI (Formateado para España):

    • Debe tener 8 números seguidos de una letra.
    • La letra debe coincidir con la correspondiente a esos números.
    • Es obligatorio.

  6. Teléfono:

    • Debe tener 9 dígitos numéricos.
    • Es obligatorio.

  7. Contraseña:

    • Debe tener entre 6 y 8 caracteres.
    • Debe contener al menos una letra minúscula, una mayúscula y un número.
    • Es obligatorio.

  8. Confirmación de contraseña:

    • Debe coincidir con el campo de contraseña.
    • Es obligatorio.

Solución paso a paso:

1. Mostrar el formulario

Paso 1: Mostrar el formulario

Enunciado: Al cargar el archivo PHP por primera vez, muestra un formulario HTML con los siguientes campos: nombre, fecha de nacimiento, correo electrónico, confirmación de correo, DNI, teléfono, contraseña y confirmación de contraseña. No realices ninguna validación en el HTML, solo en PHP.

Solución
Formulario HTML con PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php
// Inicializamos las variables para evitar errores en el formulario
$nombre = $fecha_nacimiento = $email = $email_confirmacion = $dni = $telefono = $password = $password_confirmacion = "";
$errores = [];

// Comprobamos si se han enviado datos
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Aquí se gestionarán las validaciones (este paso se desarrollará en los siguientes ejercicios)
}
?>

<!-- Formulario HTML -->
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" value="<?php echo $nombre; ?>" required><br>

    <label for="fecha_nacimiento">Fecha de Nacimiento:</label>
    <input type="date" id="fecha_nacimiento" name="fecha_nacimiento" value="<?php echo $fecha_nacimiento; ?>" required><br>

    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email" value="<?php echo $email; ?>" required><br>

    <label for="email_confirmacion">Confirmar correo electrónico:</label>
    <input type="email" id="email_confirmacion" name="email_confirmacion" value="<?php echo $email_confirmacion; ?>" required><br>

    <label for="dni">DNI:</label>
    <input type="text" id="dni" name="dni" value="<?php echo $dni; ?>" required><br>

    <label for="telefono">Teléfono:</label>
    <input type="text" id="telefono" name="telefono" value="<?php echo $telefono; ?>" required><br>

    <label for="password">Contraseña:</label>
    <input type="password" id="password" name="password" value="<?php echo $password; ?>" required><br>

    <label for="password_confirmacion">Confirmar Contraseña:</label>
    <input type="password" id="password_confirmacion" name="password_confirmacion" value="<?php echo $password_confirmacion; ?>" required><br>

    <input type="submit" value="Enviar">
</form>

2. Sanitización, validación y manejo de errores

Paso 2: Validar i sanitizar los datos y mostrar errores

Enunciado: Cuando los datos sean enviados, valida cada uno de los campos. Si hay errores, muestra un div rojo sobre el formulario que contenga los mensajes de error para cada campo y restaura los valores en los campos, excepto las contraseñas.

Recuerda sanitizar los datos antes de procesarlos utilizando las sanitizaciones vistas en el tema anterior.

Solución
Validación y sanitización de datos en PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Sanitización de los campos antes de validarlos
    $nombre = filter_var($_POST["nombre"], FILTER_SANITIZE_STRING);
    $email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
    $email_confirmacion = filter_var($_POST["email_confirmacion"], FILTER_SANITIZE_EMAIL);
    $dni = filter_var($_POST["dni"], FILTER_SANITIZE_STRING);
    $telefono = filter_var($_POST["telefono"], FILTER_SANITIZE_NUMBER_INT);
    $password = $_POST["password"];
    $password_confirmacion = $_POST["password_confirmacion"];

    // Validación de campos
    if (strlen($nombre) < 4 || strlen($nombre) > 50) {
        $errores[] = "El nombre debe tener entre 4 y 50 caracteres.";
    }

    // Validación de correo electrónico
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errores[] = "El correo electrónico no es válido.";
    }

    // Validación de confirmación de correo electrónico
    if ($email != $email_confirmacion) {
        $errores[] = "Los correos electrónicos no coinciden.";
    }

    // Validación de DNI (asumimos formato español)
    if (!preg_match("/^\d{8}[A-Za-z]$/", $dni)) {
        $errores[] = "El DNI no tiene el formato correcto.";
    }

    // Validación de teléfono
    if (!preg_match("/^\d{9}$/", $telefono)) {
        $errores[] = "El teléfono debe tener 9 dígitos.";
    }

    // Validación de contraseña
    if (strlen($password) < 6 || strlen($password) > 8 || !preg_match("/[a-z]/", $password) || !preg_match("/[A-Z]/", $password) || !preg_match("/[0-9]/", $password)) {
        $errores[] = "La contraseña debe tener entre 6 y 8 caracteres, con al menos una mayúscula, una minúscula y un número.";
    }

    // Validación de confirmación de contraseña
    if ($password != $password_confirmacion) {
        $errores[] = "Las contraseñas no coinciden.";
    }

    // Si no hay errores, mostramos mensaje de éxito
    if (empty($errores)) {
        echo "<div class='exito'>Datos recibidos correctamente, gracias.</div>";
    }
}
?>

<!-- Mostrar errores en un div rojo -->
<?php if (!empty($errores)) { ?>
    <div class="errores">
        <ul>
            <?php foreach ($errores as $error) { ?>
                <li style="color:red;"><?php echo $error; ?></li>
            <?php } ?>
        </ul>
    </div>
<?php } ?>

3. Mostrar mensaje de éxito

Paso 3: Mostrar mensaje de éxito

Enunciado: Si los datos son válidos, muestra un mensaje indicando que los datos han sido recibidos y serán procesados. Si hay errores, el formulario se volverá a mostrar con los errores.

Solución
Mostrar mensaje de éxito
1
2
3
4
5
6
<?php
// Si no hay errores, mostramos un mensaje de éxito
if (empty($errores)) {
    echo "<div class='exito'>Datos recibidos correctamente, gracias.</div>";
}
?>

Conclusión

Este ejercicio permite a los estudiantes practicar la creación de un formulario HTML, la validación de los datos introducidos en el servidor con PHP, y la sanitización de los datos recibidos para proteger la aplicación. Este tipo de validaciones del lado del servidor es crucial en el desarrollo de aplicaciones web seguras.

Resumen

En este punto hemos cubierto cómo crear formularios HTML, cómo procesar los datos recibidos con PHP, y cómo realizar validaciones y sanitizaciones básicas. Los formularios son una parte fundamental en el desarrollo de aplicaciones web, y entender cómo manejarlos de manera segura es crucial.