I form HTML
e l'invio dei dati a PHP

1. Cosa impariamo oggi

• Cos'è un form HTML e a cosa serve
• Come il browser costruisce e invia i dati
• La differenza tra GET e POST
• Cos'è $_REQUEST e perché è comodo ma rischioso
• Come osservare i dati arrivare a una pagina PHP (senza ancora scriverla)

2. Il problema: come fa il browser a parlare col server?

• Il browser richiede una pagina → il server risponde con HTML
• Finora: comunicazione a senso unico
• Ma se voglio inviare un nome, una email, una ricerca, una password?

Serve un meccanismo per inviare dati dal client al server.

→ Il form HTML è quel meccanismo.

3. Il protocollo HTTP in 30 secondi

Ogni richiesta HTTP ha:

• un metodo (GET, POST, …)
• un URL
• eventuali dati (query string o corpo)
• degli header

Il form HTML decide:

• dove inviare i dati → attributo action
• come inviarli → attributo method

4. Anatomia di un form

<form action="ricevi.php" method="POST">
    <!-- qui vanno i campi -->
    <input type="text" name="nome">
    <button type="submit">Invia</button>
</form>

5. L'attributo name: la chiave del problema

Ogni campo che vogliamo inviare deve avere un name.

<input type="text" name="cognome" value="Rossi">

Il browser al submit crea la coppia:

cognome = Rossi

6. I principali tipi di input

7. Un form completo (parte 1)

<form action="spia.php" method="GET">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="nascita">Data di nascita:</label>
    <input type="date" id="nascita" name="nascita">

required e type="email" attivano la validazione lato client.

8. Un form completo (parte 2)

    <p>Sesso:</p>
    <label><input type="radio" name="sesso" value="M"> M</label>
    <label><input type="radio" name="sesso" value="F"> F</label>

    <p>Linguaggi:</p>
    <label><input type="checkbox" name="linguaggi[]" value="HTML"> HTML</label>
    <label><input type="checkbox" name="linguaggi[]" value="CSS"> CSS</label>
    <label><input type="checkbox" name="linguaggi[]" value="JS"> JS</label>

    <label for="corso">Corso:</label>
    <select id="corso" name="corso">
        <option value="">-- scegli --</option>
        <option value="web">Sviluppo Web</option>
        <option value="db">Basi di dati</option>
    </select>

    <textarea name="note" rows="3" cols="40"></textarea>

    <input type="hidden" name="versione" value="1.0">
    <button type="submit">Invia</button>
</form>

9. Metodo GET

Il browser appende i dati all'URL:

spia.php?nome=Mario&cognome=Rossi&email=mario@x.it

• ✅ visibile, condivisibile, bookmarkabile
• ✅ utile per ricerche e filtri
• ❌ lunghezza limitata (~2000 caratteri)
• ❌ mai per dati sensibili (password, carte, …)

10. Metodo POST

Il browser mette i dati nel corpo della richiesta:

POST /spia.php HTTP/1.1
Content-Type: application/x-www-form-urlencoded

nome=Mario&cognome=Rossi&email=mario@x.it

• ✅ URL pulito, dati non visibili in barra indirizzi
• ✅ nessun limite pratico di lunghezza
• ✅ obbligatorio per login, upload, dati sensibili
• ❌ non bookmarkabile, ricaricare la pagina può reinviare i dati

11. GET vs POST: tabella riassuntiva

12. $_REQUEST: il raccoglitore

In PHP, $_REQUEST è un array che contiene GET + POST + COOKIE.

echo $_REQUEST['nome'];  // funziona sia con GET sia con POST

Perché è comodo: un solo codice gestisce entrambi i metodi.

Perché è rischioso:

• non sai da dove viene il dato
• conflitti silenziosi (se nome arriva sia in GET sia in POST)
• problemi di sicurezza (cookie injection)

13. La pagina "spia" (scatola nera)

Salva questo file come spia.php. Non serve capirlo: serve a mostrare cosa arriva.

<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Dati ricevuti</title></head>
<body>
    <h1>Dati ricevuti</h1>
    <p>Metodo: <strong><?php echo $_SERVER['REQUEST_METHOD']; ?></strong></p>

    <?php
    function mostra($titolo, $arr) {
        echo "<h2>$titolo</h2>";
        if (empty($arr)) { echo "<p><em>nessun dato</em></p>"; return; }
        echo "<table border='1' cellpadding='6'>";
        foreach ($arr as $k => $v) {
            $val = is_array($v) ? implode(', ', $v) : $v;
            echo "<tr><td>" . htmlspecialchars($k) . "</td>"
               . "<td>" . htmlspecialchars($val) . "</td></tr>";
        }
        echo "</table>";
    }
    mostra('$_GET', $_GET);
    mostra('$_POST', $_POST);
    mostra('$_REQUEST', $_REQUEST);
    ?>
</body>
</html>

14. Demo live: form in GET

1. Apriamo modulo.html
2. Compiliamo i campi
3. Inviamo
4. Guardiamo l'URL:

spia.php?nome=Mario&cognome=Rossi&email=mario@x.it
   &sesso=M&linguaggi[]=HTML&linguaggi[]=CSS

5. Nella pagina vediamo i dati in $_GET e in $_REQUEST (ma $_POST è vuoto)

15. Demo live: form in POST

Cambiamo solo una riga:

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

Ora:

• l'URL resta pulito (spia.php)
• $_POST si popola
• $_GET è vuoto

16. URL encoding

Alcuni caratteri nell'URL devono essere codificati:

nome=Maria Grazia   →   nome=Maria+Grazia

Lo fa automaticamente il browser. PHP lo decodifica automaticamente.

17. Campi hidden

<input type="hidden" name="versione" value="1.0">
<input type="hidden" name="id_utente" value="42">

• Non visibili all'utente
• Ma presenti nell'invio (e visibili in GET / DevTools!)

18. Checkbox multiple e radio

Checkbox multiple → array

<input type="checkbox" name="linguaggi[]" value="HTML">
<input type="checkbox" name="linguaggi[]" value="CSS">
<input type="checkbox" name="linguaggi[]" value="JS">

Se selezioni HTML e JS, PHP riceve un array. Senza [] riceverebbe solo l'ultimo valore.

Radio → scelta singola

<input type="radio" name="sesso" value="M"> M
<input type="radio" name="sesso" value="F"> F

Stesso name → il browser invia un solo valore. Se non selezioni nulla, il campo non viene inviato.

19. Select e textarea

<select name="corso">
    <option value="">-- scegli --</option>
    <option value="web">Sviluppo Web</option>
    <option value="db">Basi di dati</option>
</select>

<textarea name="note" rows="3" cols="40"></textarea>

• select: singola scelta (o multipla con multiple)
• textarea: testo lungo, inviato come stringa

20. Validazione lato client

HTML5 offre validazione gratis:

<input type="text" name="nome" required>
<input type="email" name="email">
<input type="number" name="eta" min="14" max="99">
<input type="text" name="cf"
       pattern="[A-Z]{6}[0-9]{2}[A-Z][0-9]{2}[A-Z][0-9]{3}[A-Z]">

Il browser blocca il submit se i dati non sono validi.

21. Guardiamo la richiesta HTTP

Apriamo DevTools (F12) → Network:

1. Compila e invia il form
2. Clicca la richiesta spia.php
3. Osserva:
   • Headers → metodo, URL, content-type
   • Payload (per POST) → i dati inviati
   • Query String (per GET) → i parametri nell'URL

22. Errori comuni

Errore #1 — Dimenticare il name

<input type="text" id="nome">            <!-- ❌ non viene inviato -->
<input type="text" id="nome" name="nome"> <!-- ✅ -->

Il campo sparisce silenziosamente: nessun errore, semplicemente non arriva.

Errore #2 — Usare GET per dati sensibili

<form action="login.php" method="GET">   <!-- ❌ -->
    <input type="password" name="pwd">
</form>

Risultato nell'URL: login.php?user=mario&pwd=segretissima → visibile in barra, cronologia, log del server.

Errore #3 — Dimenticare [] nelle checkbox multiple

Con name="linguaggi" arriva solo l'ultimo selezionato. Con name="linguaggi[]" arrivano tutti.

23. Riepilogo concetti

• Il form è il meccanismo con cui il client invia dati
• action = dove, method = come
• Ogni campo ha un name (chiave) e un value (valore)
• GET → dati nell'URL, POST → dati nel corpo
• $_REQUEST raccoglie GET + POST + cookie (usare con cautela)
• La validazione HTML5 è comoda ma non sufficiente

Esercizi — parte 1

Esercizi — parte 2

<form action="ricevi.php" method="POST">
    <input type="text" id="nome">
    <input type="email" name="email">
    <input type="checkbox" name="hobby" value="sport">
    <input type="checkbox" name="hobby" value="musica">
    <input type="password" name="pwd" method="GET">
    <button>Invia</button>
</form>

Sicurezza: primi accenni

• GET → dati in chiaro nell'URL: mai password, mai token
• POST → più riservato, ma viaggia comunque in chiaro senza HTTPS
• I dati arrivano dall'esterno: non fidarsi mai
• La validazione HTML5 è solo "cortesia" verso l'utente
• La validazione vera si fa sul server (lo vedremo con PHP)

Quiz di fine lezione

1. Quale attributo identifica un campo nell'invio?
2. Differenza principale GET/POST?
3. Cosa contiene $_REQUEST?
4. Perché non usare GET per una password?
5. Cosa fa name="interessi[]"?
6. Un campo hidden è sicuro?

Cosa vedremo la prossima volta

• Come leggere i dati in PHP: $_GET, $_POST, $_REQUEST
• Validazione lato server
• Sanificazione dell'input (htmlspecialchars, filtri)
• Invio di email da un form
• Upload di file

Riferimenti utili

• MDN — <form>: https://developer.mozilla.org/it/docs/Web/HTML/Element/form
• MDN — Input types: https://developer.mozilla.org/it/docs/Web/HTML/Element/input
• W3Schools — Forms: https://www.w3schools.com/html/html_forms.asp
• MDN — HTTP methods: https://developer.mozilla.org/it/docs/Web/HTTP/Methods

Grazie!
Domande?