4  Form HTML e interazione con PHP

4.1 Il ruolo dei form

I form permettono a una pagina web di raccogliere dati dall’utente — testo, scelte e file — e inviarli a una risorsa sul server. L’elaborazione può avvenire in un’altra pagina PHP oppure nella stessa pagina che contiene il form.

4.2 Il tag FORM

<form name="..." action="..." method="..." target="...">
    <!-- campi del form -->
</form>

Attributi principali:

  • action: URL della pagina PHP che riceve i dati;

  • method: GET o POST;

  • target: indica dove visualizzare la risposta; normalmente può essere omesso;

  • enctype: formato dei dati, obbligatorio con i file (multipart/form-data).

AvvisoAttenzione

Fare attenzione ai percorsi relativi e assoluti del valore assegnato all’attributo action.

FIELDSET e LEGEND

Servono a raggruppare i campi in macro-aree, con un titolo:

<fieldset>
    <legend>Dati anagrafici</legend>
    <!-- campi appartenenti al gruppo -->
</fieldset>

Ogni fieldset dovrebbe avere al massimo un elemento legend, collocato come primo elemento del gruppo.

4.3 GET e POST

Caratteristica GET POST
Posizione dei dati Query string dell’URL Corpo della richiesta
Array PHP $_GET $_POST
Condivisione URL salvabile e condivisibile Dati non inclusi nell’URL
Uso tipico Ricerche, filtri, paginazione Creazione o modifica di dati, login
Dimensione Limitata anche da browser e server Limitata dalla configurazione del server
ImportanteGET, POST e sicurezza

POST non cifra i dati: evita solamente di mostrarli nell’URL. Per proteggere le informazioni durante il trasferimento è necessario usare HTTPS. Le password e gli altri dati sensibili non devono essere inseriti in una richiesta GET.

4.4 Il tag LABEL

Associa un’etichetta descrittiva a un campo. L’attributo for deve corrispondere all’id del campo:

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">

4.5 Il tag INPUT

Con l’attributo type si ottengono quasi tutti i campi di un form. input è un elemento vuoto e non ha tag di chiusura. Gli attributi più comuni sono name, che identifica il dato inviato a PHP, type, value e id.

Testo e password

<input type="text" name="nome">
<input type="password" name="pwd">

Checkbox e radio

  • checkbox: selezione indipendente, anche multipla;

  • radio: una sola scelta possibile; tutti i pulsanti dello stesso gruppo devono avere lo stesso name.

<input type="checkbox" name="sport" value="calcio" checked> Calcio
<input type="radio" name="corso" value="inf" checked> Informatica
<input type="radio" name="corso" value="ele"> Elettronica

Campo nascosto e file

<input type="hidden" name="id" value="42">
<input type="file" name="documento">
NotaNota

Il campo file richiede method="POST" ed enctype="multipart/form-data". I dati del file arrivano in $_FILES, non in $_POST, e devono essere verificati prima di essere salvati.

Pulsanti

<input type="submit" value="Invia">
<input type="reset" value="Ripristina">

submit invia i dati, reset svuota il form.

4.6 TEXTAREA e SELECT

<textarea name="messaggio" rows="5" cols="40"></textarea>

<select name="corso">
    <option value="inf" selected>Informatica</option>
    <option value="ele">Elettronica</option>
</select>

4.7 Ricevere i dati in PHP

I dati del form arrivano allo script PHP tramite gli array superglobali $_GET e $_POST, con una chiave uguale all’attributo name. I valori semplici ricevuti sono stringhe, anche quando provengono da input type="number".

<?php
$nome = $_POST["nome"] ?? "";

if ($nome !== "") {
    echo "Ciao " . htmlspecialchars(
        $nome,
        ENT_QUOTES | ENT_SUBSTITUTE,
        "UTF-8"
    );
}
?>

L’operatore ?? fornisce un valore predefinito quando la chiave non esiste. htmlspecialchars() codifica il testo per inserirlo in modo sicuro nell’HTML; non sostituisce però la validazione del dato.

Un checkbox non selezionato non invia alcun dato: per verificarlo si usa isset():

<?php
if (isset($_POST["sport"])) {
    echo "Hai selezionato Calcio";
}
?>
AvvisoAttenzione

La chiave $_POST["..."] deve corrispondere esattamente (anche nelle maiuscole) all’attributo name del campo HTML.

4.7.1 Validare i dati

La validazione controlla che un valore rispetti i requisiti previsti; la sanificazione può invece modificarlo. Per esempio, filter_var() può verificare un indirizzo email:

$email = $_POST["email"] ?? "";

if (filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
    echo "Indirizzo email non valido";
} else {
    echo "Indirizzo email valido";
}
AvvisoNon fidarsi dell’input

Attributi HTML come required, min, max e type="number" migliorano l’esperienza dell’utente, ma possono essere aggirati. Il server deve sempre controllare nuovamente tutti i dati ricevuti.

4.8 Esempi completi

4.8.1 Massimo e minimo tra tre numeri

<form action="esempio1.php" method="post">
        <fieldset>
            <legend>Max e min tra 3 numeri</legend>
            <label>Primo numero: </label>
            <input type="text" name="a1" value="0"><br>
            <label>Secondo numero: </label>
            <input type="text" name="b1" value="0"><br>
            <label>Terzo numero: </label>
            <input type="text" name="c1" value="0"><br>
        </fieldset>
        <input type="submit" value="Invia i dati">
        <input type="reset" value="Cancella i dati">
    </form>
<?php
$a = $_POST["a1"] ?? null;
$b = $_POST["b1"] ?? null;
$c = $_POST["c1"] ?? null;

if (is_numeric($a) && is_numeric($b) && is_numeric($c)) {
    $a = (float) $a;
    $b = (float) $b;
    $c = (float) $c;

    $max = $a;
    $min = $a;

    if ($b > $max) { $max = $b; }
    if ($b < $min) { $min = $b; }
    if ($c > $max) { $max = $c; }
    if ($c < $min) { $min = $c; }

    echo "minimo = " . $min . "<br>";
    echo "massimo = " . $max . "<br>";
} else {
    echo "Inserire tre numeri validi";
}
?>

4.8.2 Calcolatrice con checkbox

L’utente può selezionare più operazioni contemporaneamente:

<form action="esempio2.php" method="post">
    <fieldset>
    <legend>Operazione</legend>
        <input type="checkbox" name="somma" checked> Somma<br>
        <input type="checkbox" name="differenza"> Differenza<br>
        <input type="checkbox" name="prodotto"> Prodotto<br>
        <input type="checkbox" name="quoziente"> Quoziente<br>
    </fieldset>
    <label>Primo operando: </label>
    <input type="text" name="a" value="0"><br>
    <label>Secondo operando: </label>
    <input type="text" name="b" value="0"><br>
    <input type="submit" value="Invia">
    </form>
<?php
$a = $_POST["a"] ?? null;
$b = $_POST["b"] ?? null;

if (is_numeric($a) && is_numeric($b)) {
    $a = (float) $a;
    $b = (float) $b;

    if (isset($_POST["somma"])) echo ($a + $b) . "<br>";
    if (isset($_POST["differenza"])) echo ($a - $b) . "<br>";
    if (isset($_POST["prodotto"])) echo ($a * $b) . "<br>";
    if (isset($_POST["quoziente"])) {
        echo $b != 0
            ? ($a / $b) . "<br>"
            : "Errore: divisione per zero<br>";
    }
} else {
    echo "Errore: inserire due numeri validi";
}
?>
NotaNota

is_numeric() verifica che un valore sia numerico: controllare sempre i dati ricevuti da un form.

4.8.3 Calcolatrice con radio button

Qui è possibile scegliere una sola operazione, quindi si usa uno switch:

<form action="esempio3.php" method="post">
        <fieldset>
            <legend>Operazione</legend>
            <input type="radio" name="op" value="somma" checked> Somma
            <input type="radio" name="op" value="differenza"> Differenza
            <input type="radio" name="op" value="prodotto"> Prodotto
            <input type="radio" name="op" value="quoziente"> Quoziente
        </fieldset>
    <label>Primo operando: </label>
    <input type="text" name="a" value="0"><br>
    <label>Secondo operando: </label>
    <input type="text" name="b" value="0"><br>
    <input type="submit" value="Invia">
    </form>
<?php
$a = $_POST["a"] ?? null;
$b = $_POST["b"] ?? null;
$operazione = $_POST["op"] ?? "";

if (is_numeric($a) && is_numeric($b)) {
    $a = (float) $a;
    $b = (float) $b;

    switch ($operazione) {
        case "somma":
            echo $a + $b;
            break;
        case "differenza":
            echo $a - $b;
            break;
        case "prodotto":
            echo $a * $b;
            break;
        case "quoziente":
            echo ($b != 0) ? $a / $b : "ERRORE: divisore nullo!";
            break;
        default:
            echo "Operazione non valida";
    }
} else {
    echo "Errore: inserire due numeri validi";
}
?>

4.9 Esercizi

  1. Creare un form con nome e cognome che mostri un messaggio di benvenuto, codificando correttamente l’output HTML.
  2. Creare un form con checkbox per scegliere più colori e mostrare quelli selezionati.
  3. Creare un form con radio button per scegliere una taglia (S, M, L) e confermarla.
  4. Creare una calcolatrice completa utilizzando un menu select per scegliere l’operazione.
  5. Creare un form che riceva un indirizzo email e lo validi con FILTER_VALIDATE_EMAIL.
  6. Creare un form di registrazione con campi obbligatori e mostrare un messaggio specifico per ogni dato mancante o non valido.
AvvisoIstruzioni di consegna

Consegnare ogni esercizio in un file PHP diverso e numerato. Inserire tutti i file in una cartella denominata cognome_nome e consegnarla in formato compresso.