UD 3 Generación Dinámica de Formularios

Duración Estimada: 10 horas

Desarrolla aplicaciones web identificando y aplicando mecanismos para separar el código de presentación de la lógica de negocio.

• D Se han utilizado formularios generados de forma dinámica para responder a los eventos de la aplicación web.

Para implementar la generación dinámica de formularios en PHP, puedes crear una estructura que permita definir los campos de un formulario de manera dinámica y luego construir el HTML del formulario en base a esta configuración.

• Esto es útil cuando tienes formularios que cambian frecuentemente o si quieres construir formularios en base a entradas de una base de datos.

Ejemplo:

1: Definir la Configuración del Formulario

Primero, definimos una configuración del formulario en un array PHP. Cada elemento del array representará un campo del formulario, con su tipo, nombre, etiqueta, valores opcionales, y cualquier otra propiedad que necesitemos.

$formConfig = [
    [
        'type' => 'text',
        'name' => 'first_name',
        'label' => 'Nombre',
        'placeholder' => 'Ingresa tu nombre',
        'required' => true,
    ],
    [
        'type' => 'email',
        'name' => 'email',
        'label' => 'Correo Electrónico',
        'placeholder' => 'Ingresa tu correo',
        'required' => true,
    ],
    [
        'type' => 'select',
        'name' => 'country',
        'label' => 'País',
        'options' => ['Mexico', 'Colombia', 'Argentina', 'España'],
        'required' => true,
    ],
    [
        'type' => 'radio',
        'name' => 'gender',
        'label' => 'Género',
        'options' => ['Masculino', 'Femenino', 'Otro'],
        'required' => true,
    ],
    [
        'type' => 'checkbox',
        'name' => 'accept_terms',
        'label' => 'Acepto los términos y condiciones',
        'required' => true,
    ],
    [
        'type' => 'submit',
        'name' => 'submit',
        'value' => 'Enviar',
    ],
];

2: Crear una Función para Generar el Formulario

Creamos una función que recibe la configuración del formulario y genera el HTML de cada campo según sus especificaciones. Esto nos permite crear cualquier formulario con solo cambiar la configuración.

function generateForm($config) {
    $formHTML = '<form method="POST" action="">';

    foreach ($config as $field) {
        // Etiqueta del campo
        if (isset($field['label']) && $field['type'] !== 'submit') {
            $formHTML .= "<label for='{$field['name']}'>{$field['label']}</label>";
        }

        // Generar campos según su tipo
        switch ($field['type']) {
            case 'text':
            case 'email':
                $placeholder = $field['placeholder'] ?? '';
                $required = isset($field['required']) && $field['required'] ? 'required' : '';
                $formHTML .= "<input type='{$field['type']}' name='{$field['name']}' placeholder='$placeholder' $required>";
                break;

            case 'select':
                $required = isset($field['required']) && $field['required'] ? 'required' : '';
                $formHTML .= "<select name='{$field['name']}' $required>";
                foreach ($field['options'] as $option) {
                    $formHTML .= "<option value='$option'>$option</option>";
                }
                $formHTML .= "</select>";
                break;

            case 'radio':
                foreach ($field['options'] as $option) {
                    $required = isset($field['required']) && $field['required'] ? 'required' : '';
                    $formHTML .= "<input type='radio' name='{$field['name']}' value='$option' $required> $option ";
                }
                break;

            case 'checkbox':
                $required = isset($field['required']) && $field['required'] ? 'required' : '';
                $formHTML .= "<input type='checkbox' name='{$field['name']}' $required> {$field['label']}";
                break;

            case 'submit':
                $value = $field['value'] ?? 'Enviar';
                $formHTML .= "<button type='submit' name='{$field['name']}'>$value</button>";
                break;
        }

        // Salto de línea después de cada campo
        $formHTML .= "<br>";
    }

    $formHTML .= '</form>';
    return $formHTML;
}

Paso 3: Llamar a la Función para Generar el Formulario

Usamos la función generateForm pasando la configuración del formulario. Esto generará el formulario en HTML basado en la configuración definida.

echo generateForm($formConfig);

4: Procesar el Formulario al Enviar

En el mismo archivo PHP, puedes agregar lógica para procesar el formulario cuando se envía. Verificamos que los datos se hayan enviado y los imprimimos o los guardamos según lo necesario.

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Aquí puedes procesar los datos del formulario
    echo "<h2>Datos Recibidos:</h2>";
    foreach ($_POST as $key => $value) {
        echo "<p>$key: $value</p>";
    }
}

Código Ejemplo

Código completo de un archivo PHP con la generación dinámica de formularios:

<?php
session_start();

$formConfig = [
    [
        'type' => 'text',
        'name' => 'first_name',
        'label' => 'Nombre',
        'placeholder' => 'Ingresa tu nombre',
        'required' => true,
    ],
    [
        'type' => 'email',
        'name' => 'email',
        'label' => 'Correo Electrónico',
        'placeholder' => 'Ingresa tu correo',
        'required' => true,
    ],
    [
        'type' => 'select',
        'name' => 'country',
        'label' => 'País',
        'options' => ['Mexico', 'Colombia', 'Argentina', 'España'],
        'required' => true,
    ],
    [
        'type' => 'radio',
        'name' => 'gender',
        'label' => 'Género',
        'options' => ['Masculino', 'Femenino', 'Otro'],
        'required' => true,
    ],
    [
        'type' => 'checkbox',
        'name' => 'accept_terms',
        'label' => 'Acepto los términos y condiciones',
        'required' => true,
    ],
    [
        'type' => 'submit',
        'name' => 'submit',
        'value' => 'Enviar',
    ],
];

function generateForm($config) {
    $formHTML = '<form method="POST" action="">';

    foreach ($config as $field) {
        if (isset($field['label']) && $field['type'] !== 'submit') {
            $formHTML .= "<label for='{$field['name']}'>{$field['label']}</label>";
        }

        switch ($field['type']) {
            case 'text':
            case 'email':
                $placeholder = $field['placeholder'] ?? '';
                $required = isset($field['required']) && $field['required'] ? 'required' : '';
                $formHTML .= "<input type='{$field['type']}' name='{$field['name']}' placeholder='$placeholder' $required>";
                break;

            case 'select':
                $required = isset($field['required']) && $field['required'] ? 'required' : '';
                $formHTML .= "<select name='{$field['name']}' $required>";
                foreach ($field['options'] as $option) {
                    $formHTML .= "<option value='$option'>$option</option>";
                }
                $formHTML .= "</select>";
                break;

            case 'radio':
                foreach ($field['options'] as $option) {
                    $required = isset($field['required']) && $field['required'] ? 'required' : '';
                    $formHTML .= "<input type='radio' name='{$field['name']}' value='$option' $required> $option ";
                }
                break;

            case 'checkbox':
                $required = isset($field['required']) && $field['required'] ? 'required' : '';
                $formHTML .= "<input type='checkbox' name='{$field['name']}' $required> {$field['label']}";
                break;

            case 'submit':
                $value = $field['value'] ?? 'Enviar';
                $formHTML .= "<button type='submit' name='{$field['name']}'>$value</button>";
                break;
        }
        $formHTML .= "<br>";
    }

    $formHTML .= '</form>';
    return $formHTML;
}

echo generateForm($formConfig);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    echo "<h2>Datos Recibidos:</h2>";
    foreach ($_POST as $key => $value) {
        echo "<p>$key: $value</p>";
    }
}

Así puedes crear formularios dinámicos en PHP de forma flexible y extensible, añadiendo o eliminando campos fácilmente modificando el array de configuración.

Actividad

Actividad

Modifica la plantilla anterior para configurar un formulario que tenga relación con tu proyecto de la UD2, añade más campos de diferentes tipos