Desenvolupament web dinàmic backend amb PHP
Conceptes¶

Sessió 6: Formularis¶

Objectiu Sessió 6

L’objectiu d’aquesta sessió serà la de generar formularis dinàmicament i processar-los a la banda del servidor. Això permetrà la interactivitat amb l'usuari per intercanvi d'informació amb la UI generada dinàmicament des del servidor tenint en compte la UX de l'usuari.

Formularis web HTML¶

Enllaç a HTML Forms - W3Schools i PHP Forms - W3Schools, PHP.net - Formularis

Els formularis HTML són una part essencial de qualsevol aplicació web que necessiti rebre dades dels usuaris. Permeten introduir informació i enviar-la al servidor per ser processada.

Un formulari comença amb l’etiqueta <form> i pot contenir diversos camps (inputs), botons i altres elements interactius.

<form action="procesa.php" method="POST">
  <input type="text" name="nom" placeholder="Escriu el teu nom" />
  <input type="submit" value="Enviar" />
</form>

Atributs importants del formulari

action: indica la ruta del fitxer al servidor que rebrà i processarà les dades.
method: indica el mètode HTTP per enviar les dades:
- GET: envia les dades per la URL (visible).
- POST: envia les dades a dins del HEADER (més segur).

Camps de formulari

Els formularis poden contenir diversos tipus de camps d’entrada, com:

Camps de text (text, password, email, etc.)
Caselles de selecció (checkbox)
Botons d’opció (radio)
Menús desplegables (select)
Arxius (file)
Botons (submit, reset, button)

Exemple formulari web

Visualització FORMVisualització FORM + CSSVisualització HTMLCodi PHPCodi CSSExplicació

    <form action="p3-s6-ex1.php" method="POST">
        <label for="nom">Nom:</label>
        <input type="text" id="nom" name="nom" required />

        <label for="email">Correu electrònic:</label>
        <input type="email" id="email" name="email" required />

        <label for="edat">Edat:</label>
        <input type="number" id="edat" name="edat" />

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

    <?php
    // Comprovar si hem rebut dades per POST
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Recollir i filtrar dades
        $nom = htmlspecialchars(trim($_POST["nom"] ?? ""));
        $email = htmlspecialchars(trim($_POST["email"] ?? ""));
        $edat = htmlspecialchars(trim($_POST["edat"] ?? ""));

        // Validació bàsica
        if (empty($nom) || empty($email)) {
            echo "<h3>Falten camps obligatoris!</h3>";
            echo "<a href='javascript:history.back()'>Tornar enrere</a>";
        } else {
            // Mostrar dades rebudes
            echo "<h2>Dades rebudes:</h2>";
            echo "<ul>";
            echo "<li><strong>Nom:</strong> $nom</li>";
            echo "<li><strong>Email:</strong> $email</li>";
            echo "<li><strong>Edat:</strong> " . ($edat ?: "No especificada") . "</li>";
            echo "</ul>";
        }
    } else {
        // Si s'accedeix directament sense enviar el formulari
        echo "<h3>No s'ha rebut cap formulari.</h3>";
        echo "<a href='formulari.html'>Torna al formulari</a>";
    }
    ?>

        body {
          font-family: Arial, sans-serif;
          margin: 40px;
          background-color: #f9f9f9;
        }

        form {
          background-color: #fff;
          padding: 20px;
          max-width: 400px;
          border-radius: 8px;
          box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        label {
          display: block;
          margin-top: 15px;
          font-weight: bold;
        }

        input[type="text"],
        input[type="email"],
        input[type="number"] {
          width: 100%;
          padding: 8px;
          margin-top: 5px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }

        input[type="submit"] {
          margin-top: 20px;
          background-color: #4CAF50;
          color: white;
          border: none;
          padding: 10px 20px;
          border-radius: 4px;
          cursor: pointer;
        }

        input[type="submit"]:hover {
          background-color: #45a049;
        }

Tenim un formulari HTML que mostrarà:

Un camp per escriure el nom
Un camp per introduir un email
Un camp per escriure l’edat
Un botó per enviar el formulari

En aquest exemple usarem arxius .html

Podeu observar la diferència d'estil a l'aplicar el CSS. Tot i que funcionalment és similar.

<form action="p3-s6-ex1.php" method="POST">

Usarem el mètode POST per enviar les dades al servidor usant la capçalera HTTP.

La pàgina .PHP que es farà la crida HTTP serà "p3-s6-ex1.php".

Una vegada rebem al servidor l'acció del SUBMIT del FORM, el que fem és processar si s'han enviat dades o no del formulari.

Això ho aconseguim:

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        //processar rebuda de dades
    }
    else
    {
        //no hi ha dades per processar
    }

Notem que fem una validació bàsica de la informació

    if (empty($nom) || empty($email)) {
        // No hi ha dades per processar
    } else {
        // Mostrar dades rebudes
    }

Ho veurem més endavant, però per a recollir dades usem l'array associaciatiu $_POST

    $nom = htmlspecialchars(trim($_POST["nom"] ?? ""));
    $email = htmlspecialchars(trim($_POST["email"] ?? ""));
    $edat = htmlspecialchars(trim($_POST["edat"] ?? ""));

htmlspecialchars() s'evita que es pugui injectar codi HTML.
trim() elimina espais en blanc abans/després del text.
$_POST["camp"] ?? "" assegura que no hi hagi errors si algun camp no s’envia.

** Més endavant veurem que podem desar-ho en una BdD.

Bones pràctiques

Assignar un atribut name a cada camp perquè el servidor pugui identificar les dades.
Fer servir etiquetes per a millorar l’accessibilitat.
Afegir required per validar que un camp no estigui buit.
Utilitzar placeholder per donar pistes a l’usuari sobre què introduir.
Aplicar estils CSS per millorar la UI

Atribut Name¶

L’atribut name és essencial: identifica cada camp i li dóna una clau amb la qual PHP (o un altre llenguatge) pot accedir al valor enviat.

Exemple:

<input type="text" name="nom" />

Si s’envia aquest formulari, al servidor rebrem:

$nom = $_POST['nom'];

Info

No confondre amb l'atribut id, que pot ser el mateix, però serà usat per ifentificar l'element al DOM.

<input type="text" id="nom" name="nom" />

Diferents elements d'un formulari Web HTML¶

Enllaç a W3Schools i MDN

Els input poden tenir molts tipus (type) segons el que vulguem captar. Aquí en tens alguns:

Tipus	Descripció	Exemple d'ús
`text`	Text lliure	`<input type="text" name="usuari" />`
`email`	Text amb format de correu	`<input type="email" name="correu" />`
`number`	Nombres	`<input type="number" name="edat" />`
`password`	Text ocult	`<input type="password" name="clau" />`
`checkbox`	Casella de selecció	`<input type="checkbox" name="accepta" />`
`radio`	Opcions exclusives	`<input type="radio" name="genere" value="h" />`
`file`	Pujar un fitxer	`<input type="file" name="document" />`
`submit`	Botó d’enviament	`<input type="submit" value="Enviar" />`
`button`	Botó genèric (accions amb JS)	`<button type="button">Clic</button>`

Botons

Els formularis poden tenir diversos botons, però els més comuns són:

<input type="submit" value="Enviar" />
<input type="reset" value="Esborrar" />
<button type="button" onclick="alert('Hola!')">Botó JavaScript</button>

submit: envia el formulari al servidor.
reset: esborra tots els camps.
button: no fa res per defecte, es fa servir amb JavaScript.

Fixeu-vos que podem combinar javascript a la banda del client amb el php a la banda del servidor.

Exemple formulari web combinat

Visualització FORMCodi HTML

    <form action="procesa.php" method="POST">
        <label>Nom:</label>
        <input type="text" name="nom" required />
        <br />
        <label>Email:</label>
        <input type="email" name="email" />
        <br />
        <label>Gènere:</label>
        <input type="radio" name="genere" value="home" /> Home
        <input type="radio" name="genere" value="dona" /> Dona
        <br />
        <label>Accepta termes:</label>
        <input type="checkbox" name="accepta" value="sí" />
        <br />
        <input type="submit" value="Enviar" />
      </form>

Abans d'enviar al servidor...¶

Tal com vam veure en apartats anteriors de Formularis HTML i javascript, tenim la oportunitat de revisar el contingut del formulari abans de ser enviat al backend. Això implica experiència UX en l'avís o acció sobre el contingut del formulari

benefici

A part de l'experiència UX d'avisar més gràficament a l'usuari de que el contingut del formulari no és vàlid abans de ser enviat al servidor, l'altra avantatge és que no es consumeix dades ni temps de processador de servidor per validar si falta una dada o altra.

Si cal fer alguna consulta al model de dades o Base de Dades, si que caldrà via POST o AJAX fer-ne la validació.

L'experiència exitosa UX serà no haver de recarregar el formulari perdre els valors que poden estar a mig introduïr.

Bàsicament caldrà fer d'alguna manera o altra:

Modificar el tipus del botó de Submit a Button
Afegir codi javascript, accedint als valors del formulari via javascript:
- onclick="Validem()";
- onsubmit="return validarFormulari()">
- document.getElementById("formulari").addEventListener("submit",funció(){});

Submit()

Si ens fa falta enviar el formulari des de javascript' usarem la funciósubmit()`

W3Schools Submit()

    document.getElementById("myForm").submit();

Caldrà que el FORM tingui el id="myForm"

Exemple formulari web combinat amb javascript

Visualització FORMCodi HTMLCodi JavaScript

    <form action="procesa.php" method="POST" onsubmit="return validarFormulari()">
        <label for="nom">Nom:</label>
        <input type="text" id="nom" name="nom" required />
        <span id="errorNom" style="color:red;"></span>
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" />
        <span id="errorEmail" style="color:red;"></span>
        <br />
        <label>Gènere:</label>
        <input type="radio" name="genere" value="home" /> Home
        <input type="radio" name="genere" value="dona" /> Dona
        <span id="errorGenere" style="color:red;"></span>
        <br />
        <label for="accepta">Accepta termes:</label>
        <input type="checkbox" id="accepta" name="accepta" value="sí" />
        <span id="errorAccepta" style="color:red;"></span>
        <br />
        <input type="submit" value="Enviar" />
    </form>

    <script src="scripts/p3-s6-ex6.js"></script>

    function validarFormulari() {
        let nom = document.getElementById("nom").value;
        let email = document.getElementById("email").value;
        let genere = document.querySelector('input[name="genere"]:checked');
        let accepta = document.getElementById("accepta").checked;
        let valid = true;

        document.getElementById("errorNom").textContent = "";
        document.getElementById("errorEmail").textContent = "";
        document.getElementById("errorGenere").textContent = "";
        document.getElementById("errorAccepta").textContent = "";

        if (nom.trim() === "") {
            document.getElementById("errorNom").textContent = "El nom és obligatori.";
            valid = false;
        }

        if (email.trim() !== "" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            document.getElementById("errorEmail").textContent = "L'email no té un format vàlid.";
            valid = false;
        }

        if (!genere) {
            document.getElementById("errorGenere").textContent = "Si us plau, selecciona el teu gènere.";
            valid = false;
        }

        if (!accepta) {
            document.getElementById("errorAccepta").textContent = "Has d'acceptar els termes.";
            valid = false;
        }

        return valid;
    }

Enviem al servidor i processem¶

Quan un usuari prem el botó Enviar, el navegador empaqueta les dades del formulari i les envia al servidor mitjançant una petició HTTP.

Elements clau que intervenen

action → indica a quin fitxer del servidor s’enviaran les dades.
method → indica com s’envien les dades (GET o POST).

<form action="procesa.php" method="POST">

Accions habituals:

Atribut	Què fa
`action="fitxer.php"`	Envia les dades a aquest fitxer PHP
`method="POST"`	Envia les dades de forma oculta al cos de la petició
`method="GET"`	Afegeix les dades a l’URL com a paràmetres visibles

Enviament amb GET

<form action="procesa.php" method="GET">
  <input type="text" name="nom" />
  <input type="submit" value="Enviar" />
</form>

Quan prems enviar, l’URL es transforma així:

procesa.php?nom=Joan

📌 Útil per a cerques, filtres, test.

Enviament amb POST

<form action="procesa.php" method="POST">
  <input type="text" name="nom" />
  <input type="submit" value="Enviar" />
</form>

Les dades NO es veuen a l’URL. S’envien dins la petició HTTP (en el cos).

📌 Útil per a formularis amb dades sensibles o grans (fitxers, passwords, etc.).

Com ho veu el servidor?

Quan arriba la petició, el servidor recull les dades amb:

$nom = $_GET['nom'];  // si era GET
$nom = $_POST['nom']; // si era POST

O ambdós, si s’usa $_REQUEST (no recomanat per seguretat).

Processem al back¶

Repassem quin és el fluxe:

Inicialment fem una petició HTTP GET a una URL que pot ser:
- arxiu .html
- arxiu .php
El servidor processa aquesta primera petició i segons és:
- arxiu .html -> retorna directament el codi HTML FORM
- arxiu .php -> genera dinàmicament el codi del HTML FORM
El navegador rep el codi HTML FORM i el mostra per per pantalla.
- Es genera la UI
L'usuari interactua amb el formulari
- Apreta el botó de SUBMIT
- L'action del FORM ens indica quina pàgina .php farà la petició.
El servidor rep la petició i dades del formulari, normalment per POST
- Processem les dades rebudes
El servidor retorna al navegador el feedback en format HTML

Consolidem els aspectes clau:

Quan l’usuari envia un formulari HTML, les dades es reben al servidor mitjançant PHP.

El servidor rep les dades segons el mètode que s’hagi especificat al formulari:

method="GET" → es reben a través de $_GET
method="POST" → es reben a través de $_POST

$nom = $_POST['nom'];
$email = $_POST['email'];

nota

Amb POST les dades no són visibles a la URL, mentre que amb GET sí.

Per saber si s’ha enviat el formulari, podem fer:

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Formulari enviat
}

També podem comprovar si una variable ha estat rebuda:

if (isset($_POST['nom'])) {
    $nom = $_POST['nom'];
}

filter_has_var()

Una altra forma més segura per validar si una variable s’ha rebut:

if (filter_has_var(INPUT_POST, 'email')) {
    $email = $_POST['email'];
}

📌 D'alguna manera és la funció del isset

Diferents tipus d’inputs i el seu tractament¶

Segons el type de cada input, la manera de treballar pot canviar lleugerament:

TEXT / EMAIL / NUMBER

$nom = $_POST['nom'];
$email = $_POST['email'];
$edat = $_POST['edat'];

RADIO

$genere = $_POST['genere']; // només un valor seleccionat

CHECKBOX

if (isset($_POST['interessos'])) {
    foreach ($_POST['interessos'] as $valor) {
        echo $valor . "<br>";
    }
}

🎯 Els checkbox s’han de definir amb name="interessos[]" per poder rebre múltiples valors.

SELECT

$color = $_POST['color']; // valor seleccionat d’un desplegable

FILE

Es gestionen amb l’array especial $_FILES:

$nomFitxer = $_FILES['document']['name'];
$tmp = $_FILES['document']['tmp_name'];
move_uploaded_file($tmp, "uploads/" . $nomFitxer);

Patró típic: mostrar o processar¶

És habitual mostrar el formulari si no s’ha enviat, o processar-lo si ja s’ha enviat:

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Processar les dades
    echo "Nom: " . $_POST['nom'];
} else {
    // Mostrar formulari
    include("formulari.html");
}

Bones pràctiques

Validar i netejar les dades rebudes (trim, htmlspecialchars, etc.)
Comprovar si les dades existeixen abans de fer-les servir
No confiar mai en el que envia l’usuari sense comprovar-ho !!!

Exemple formulari web combinat

Visualització FORMCodi PHPExplicació

    <?php
    // Inicialitzar variables
    $nom = $email = $genere = $missatge = $ciutat = "";
    $interessos = [];
    $errors = [];

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Validació del nom
        if (empty($_POST["nom"])) {
            $errors[] = "El nom és obligatori.";
        } else {
            $nom = htmlspecialchars(trim($_POST["nom"]));
        }

        // Validació de l’email
        if (empty($_POST["email"])) {
            $errors[] = "El correu electrònic és obligatori.";
        } elseif (!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
            $errors[] = "El correu electrònic no és vàlid.";
        } else {
            $email = htmlspecialchars(trim($_POST["email"]));
        }

        // Validació del gènere
        if (isset($_POST["genere"])) {
            $genere = $_POST["genere"];
        } else {
            $errors[] = "Selecciona un gènere.";
        }

        // Validació de la ciutat
        if (isset($_POST["ciutat"])) {
            $ciutat = $_POST["ciutat"];
        }

        // Interessos (checkbox)
        if (isset($_POST["interessos"])) {
            $interessos = $_POST["interessos"];
        }

        // Missatge (opcional)
        if (!empty($_POST["missatge"])) {
            $missatge = htmlspecialchars(trim($_POST["missatge"]));
        }

        // Si tot és correcte, mostrar resultat
        if (empty($errors)) {
            echo "<h2>Dades rebudes correctament!</h2>";
            echo "<p><strong>Nom:</strong> $nom</p>";
            echo "<p><strong>Email:</strong> $email</p>";
            echo "<p><strong>Gènere:</strong> $genere</p>";
            echo "<p><strong>Ciutat:</strong> $ciutat</p>";

            if (!empty($interessos)) {
                echo "<p><strong>Interessos:</strong> " . implode(", ", $interessos) . "</p>";
            }

            if ($missatge) {
                echo "<p><strong>Missatge:</strong> $missatge</p>";
            }

            exit();
        }
    }
    ?>

    <!DOCTYPE html>
    <html lang="ca">
    <head>
      <meta charset="UTF-8">
      <title>Formulari avançat</title>
      <style>
        body { font-family: sans-serif; margin: 40px; background: #f2f2f2; }
        form { background: white; padding: 20px; max-width: 600px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        input, textarea, select { width: 100%; padding: 8px; margin-top: 6px; border-radius: 4px; border: 1px solid #ccc; }
        label { margin-top: 10px; display: block; font-weight: bold; }
        input[type="submit"] { background: #007bff; color: white; border: none; cursor: pointer; margin-top: 15px; }
        input[type="submit"]:hover { background: #0056b3; }
        .checkbox-group, .radio-group { margin-top: 6px; }
        .checkbox-group label, .radio-group label { display: inline-block; margin-right: 15px; font-weight: normal; }
        .error { background: #ffe0e0; border: 1px solid red; padding: 10px; margin-bottom: 15px; }
      </style>
    </head>
    <body>

    <h2>Formulari avançat</h2>

    <?php
    if (!empty($errors)) {
        echo "<div class='error'><ul>";
        foreach ($errors as $error) {
            echo "<li>$error</li>";
        }
        echo "</ul></div>";
    }
    ?>

    <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">

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

      <label for="email">Correu electrònic:</label>
      <input type="email" id="email" name="email" value="<?php echo $email; ?>" required>

      <label>Gènere:</label>
      <div class="radio-group">
        <label><input type="radio" name="genere" value="Home" <?php if ($genere == "Home") echo "checked"; ?>> Home</label>
        <label><input type="radio" name="genere" value="Dona" <?php if ($genere == "Dona") echo "checked"; ?>> Dona</label>
        <label><input type="radio" name="genere" value="Altres" <?php if ($genere == "Altres") echo "checked"; ?>> Altres</label>
      </div>

      <label>Interessos:</label>
      <div class="checkbox-group">
        <label><input type="checkbox" name="interessos[]" value="Música" <?php if (in_array("Música", $interessos)) echo "checked"; ?>> Música</label>
        <label><input type="checkbox" name="interessos[]" value="Esport" <?php if (in_array("Esport", $interessos)) echo "checked"; ?>> Esport</label>
        <label><input type="checkbox" name="interessos[]" value="Lectura" <?php if (in_array("Lectura", $interessos)) echo "checked"; ?>> Lectura</label>
      </div>

      <label for="ciutat">Ciutat:</label>
      <select name="ciutat" id="ciutat">
        <option value="Barcelona" <?php if ($ciutat == "Barcelona") echo "selected"; ?>>Barcelona</option>
        <option value="Girona" <?php if ($ciutat == "Girona") echo "selected"; ?>>Girona</option>
        <option value="Lleida" <?php if ($ciutat == "Lleida") echo "selected"; ?>>Lleida</option>
        <option value="Tarragona" <?php if ($ciutat == "Tarragona") echo "selected"; ?>>Tarragona</option>
      </select>

      <label for="missatge">Missatge (opcional):</label>
      <textarea id="missatge" name="missatge" rows="4"><?php echo $missatge; ?></textarea>

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

    </body>
    </html>

Aquest codi PHP fa el processament del formulari que conté camps de tipus text, email, radio, checkbox, select i textarea.

El comportament es divideix en diverses parts:

Inicialització de variables

Al principi del codi:
```
$nom = $email = $genere = $missatge = $ciutat = "";
$interessos = [];
$errors = [];
```
Es declaren i inicialitzen totes les variables que es faran servir. També es crea un array $errors per guardar possibles missatges d’error si el formulari s’ha omplert incorrectament.
Comprovació si s’ha enviat el formulari
```
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    ...
}
```
Aquest bloc només s’executa si el formulari ha estat enviat. Comprova si la petició és de tipus POST, que és el mètode amb què s’envien les dades del formulari.

Validació de camps

A l’interior del if, es fan diverses validacions:

Nom

if (empty($_POST["nom"])) {
    $errors[] = "El nom és obligatori.";
} else {
    $nom = htmlspecialchars(trim($_POST["nom"]));
}

Comprova que el camp no estigui buit.
Si hi ha contingut, s’elimina espais innecessaris (trim) i es fa segur per imprimir al navegador (htmlspecialchars).

Email

if (empty($_POST["email"])) {
    $errors[] = "El correu electrònic és obligatori.";
} elseif (!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
    $errors[] = "El correu electrònic no és vàlid.";
}

Comprova si està buit.
Valida el format d’email amb filter_var.

Gènere (radio)

if (isset($_POST["genere"])) {
    $genere = $_POST["genere"];
} else {
    $errors[] = "Selecciona un gènere.";
}

Comprova que s’hagi seleccionat una opció.

Interessos (checkbox)

if (isset($_POST["interessos"])) {
    $interessos = $_POST["interessos"];
}

Captura el conjunt de caselles marcades com un array.

Ciutat (select)

if (isset($_POST["ciutat"])) {
    $ciutat = $_POST["ciutat"];
}

Guarda la ciutat seleccionada.

Missatge (textarea)

if (!empty($_POST["missatge"])) {
    $missatge = htmlspecialchars(trim($_POST["missatge"]));
}

Si s’ha escrit un missatge, també es neteja.

Si tot és correcte, mostrar resultats
```
if (empty($errors)) {
    // Mostrar dades netes i confirmació
    echo "<h2>Dades rebudes correctament!</h2>";
    ...
    exit();
}
```
- Si no hi ha errors, mostra un resum de les dades rebudes.
- S’utilitza exit() per aturar l’execució i no tornar a mostrar el formulari.
En cas d’errors, es tornen a mostrar
```
if (!empty($errors)) {
    // Mostrar llista d’errors a dalt del formulari
}
```
- Els missatges d’error s’imprimeixen a la pàgina perquè es pugui corregir el que falta.
Intercalem codi php amb codi html
- El formulari HTML està escrit directament i el codi php està situat estratègicament seguint una lògica.

Generació dinàmica de formularis amb PHP¶

Hi ha situacions on necessitem generar el formulari de manera dinàmica, és a dir, que el contingut del formulari es generi des de PHP, i no només com a HTML estàtic.

Quan ho fem?

Volem mostrar el formulari després d’una validació.
Volem que els camps es mantinguin omplerts si hi ha errors.
Volem que el formulari es generi segons dades d’un fitxer o d’una base de dades.
Volem controlar condicions: mostrar o ocultar camps segons el context.
Volem generar una llista d'opcions d'un select i posar-ne una de seleccionada.

Exemple bàsic de generació condicional

if ($_SERVER["REQUEST_METHOD"] == "POST" && empty($errors)) {
    // Mostrar resultat si tot és correcte
    echo "<h2>Gràcies, $nom!</h2>";
} else {
    // Mostrar el formulari
    ?>
    <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
        <label for="nom">Nom:</label>
        <input type="text" name="nom" value="<?php echo $nom; ?>" required><br>

        <label for="email">Email:</label>
        <input type="email" name="email" value="<?php echo $email; ?>" required><br>

        <input type="submit" value="Enviar">
    </form>
    <?php
}

Exemple d'opcions de selecció

<?php
    // Ciutats disponibles
    $opcionsCiutat = ["Barcelona", "Girona", "Lleida", "Tarragona"];
    $opcio = "Girona";
    echo "<select name='ciutat'>";
    foreach ($opcionsCiutat as $opcio) {
        $selected = ($ciutat == $opcio) ? "selected" : "";
        echo "<option value='$opcio' $selected>$opcio</option>";
    }
    echo "</select>";
?>

Observem com es genera el codi HTML del SELECT de la següent manera, si la ciutat seleccionada és Girona:

    <select name="ciutat">
        <option value="Barcelona">Barcelona</option>
        <option value="Girona" selected>Girona</option>
        <option value="Lleida">Lleida</option>
        <option value="Tarragona">Tarragona</option>
    </select>

Característiques importants

Es fa servir echo o blocs <?php ... ?> per inserir codi PHP dins HTML.
El valor dels input es manté amb value="<?php echo ... ?>".
L’atribut action apunta al mateix fitxer: $_SERVER["PHP_SELF"].
Es poden incloure errors, textos personalitzats o camps segons les dades.

Avantatges

Formulari reutilitzable dins el mateix fitxer.
Millor control de flux (mostrar/ocultar, validar).
Es poden crear bucles per generar selects, checkbox, radios amb dades externes.

Exemple formulari dinàmic

Visualització FORMCodi PHPExplicació

    <?php
    // Inicialització de variables
    $nom = "";
    $genere = "";
    $ciutat = "";
    $errors = [];

    // Ciutats disponibles
    $opcionsCiutat = ["Barcelona", "Girona", "Lleida", "Tarragona"];

    // Si s'envia el formulari
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Validació del nom
        if (empty($_POST["nom"])) {
            $errors[] = "El nom és obligatori.";
        } else {
            $nom = htmlspecialchars(trim($_POST["nom"]));
        }

        // Validació del gènere
        if (!isset($_POST["genere"])) {
            $errors[] = "Cal seleccionar un gènere.";
        } else {
            $genere = $_POST["genere"];
        }

        // Ciutat seleccionada
        if (isset($_POST["ciutat"])) {
            $ciutat = $_POST["ciutat"];
        }

        // Si no hi ha errors, mostrem les dades
        if (empty($errors)) {
            echo "<h2>Dades rebudes correctament:</h2>";
            echo "Nom: $nom<br>";
            echo "Gènere: $genere<br>";
            echo "Ciutat: $ciutat<br>";
            exit(); // Sortim per no mostrar el formulari de nou
        }
    }
    ?>

    <h2>Formulari d’exemple</h2>

    <?php
    // Mostrem errors si n’hi ha
    if (!empty($errors)) {
        echo "<ul style='color:red;'>";
        foreach ($errors as $error) {
            echo "<li>$error</li>";
        }
        echo "</ul>";
    }
    ?>

    <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
        <label for="nom">Nom:</label><br>
        <input type="text" name="nom" value="<?php echo $nom; ?>"><br><br>

        <label>Gènere:</label><br>
        <input type="radio" name="genere" value="Home" <?php if ($genere == "Home") echo "checked"; ?>> Home<br>
        <input type="radio" name="genere" value="Dona" <?php if ($genere == "Dona") echo "checked"; ?>> Dona<br>
        <input type="radio" name="genere" value="Altres" <?php if ($genere == "Altres") echo "checked"; ?>> Altres<br><br>

        <label for="ciutat">Ciutat:</label><br>
        <select name="ciutat">
            <?php
            foreach ($opcionsCiutat as $opcio) {
                $selected = ($ciutat == $opcio) ? "selected" : "";
                echo "<option value='$opcio' $selected>$opcio</option>";
            }
            ?>
        </select><br><br>

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

Aquest formulari es genera dinàmicament amb 3 opcions:

input de text per al nom.
radio buttons per escollir el gènere.
select per escollir la ciutat.

I validació bàsica i manteniment de valors

PHP_SELF¶

PHP_SELF és una variable superglobal de PHP que conté la ruta del fitxer PHP actual. S’utilitza sovint en l’atribut action dels formularis per fer que el formulari s'enviï a ell mateix.

La part pràctica és la facilitat en desenvolupar el codi en el mateix fitxer.

Exemple d’ús:

<form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">

Aquesta línia fa que quan l’usuari envia el formulari, el mateix fitxer PHP sigui el que rep i processa les dades.

Seguretat

Per què fem htmlspecialchars()?

Fem servir htmlspecialchars() per:

Evitar que es mostri codi HTML si el nom del fitxer conté caràcters especials.
Protegir de vulnerabilitats XSS (Cross-site scripting).

Per exemple, sense htmlspecialchars(), si el fitxer s’anomena index.php<script>alert(1)</script>, això podria executar codi maliciós.

Per què és útil?

Ens permet tenir formulari i processament al mateix lloc.
Facilita la validació i el retorn d’errors sense redirigir l’usuari.
És molt útil en exemples didàctics i projectes petits.

if ... else ...¶

De manera lògica podem executar el php amb if...else.... això permetrà precessar d'un bloc el formulari o bé generar-lo/mostrar-lo

Si hem passat dades de POST llavors
    //processem
Altrament
    //generem

Veiem-ho amb codi:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Processar el formulari
    $nom = htmlspecialchars($_POST["nom"]);
    echo "<p>Hola, $nom!</p>";
} else {
    // Generar el formulari
    ?>
    <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
        <label for="nom">Nom:</label>
        <input type="text" name="nom" required>
        <input type="submit" value="Enviar">
    </form>
    <?php
}
?>

La clau de volta està en que el action es generi:

    <?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>

Desenvolupament web dinàmic backend amb PHP Conceptes¶