← Elenco file form.html — 773 righe · 46,3 KiB · sola lettura
Il visualizzatore con evidenziazione non si è caricato (manca cm6.bundle.js o dmautone-shared non è raggiungibile): il file è mostrato come testo semplice, sempre in sola lettura.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>I form HTML e l'invio dei dati a PHP — Dispensa</title>
<style>
  /* ============ PAGINA ============ */
  @page {
    size: A4;
    margin: 20mm 18mm 22mm 18mm;
  }

  :root {
    --blu: #1a4d7a;
    --blu-chiaro: #e8f0f7;
    --verde: #2a7d4f;
    --arancio: #c66a1b;
    --rosso: #b32d2d;
    --grigio: #444;
    --bordo: #c8d4de;
    --code-bg: #f7f9fb;
    --code-border: #d7e0e8;
  }

  * {
    box-sizing: border-box;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 10.5pt;
    line-height: 1.65;
    color: #222;
    margin: 0;
    padding: 0;
    background: #fff;
  }

  /* ============ TITOLO ============ */
  .titolo-iniziale {
    text-align: center;
    padding: 30mm 0 20mm 0;
    border-bottom: 2pt solid var(--blu);
    margin-bottom: 15mm;
  }
  .titolo-iniziale h1 {
    font-size: 26pt;
    color: var(--blu);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.5pt;
  }

  /* ============ SEZIONI ============ */
  .slide {
    page-break-after: always;
    page-break-inside: avoid;
    padding-top: 4mm;
  }
  .slide:last-child { page-break-after: auto; }

  h2 {
    font-size: 16pt;
    color: var(--blu);
    border-bottom: 2pt solid var(--blu);
    padding-bottom: 3mm;
    margin: 0 0 8mm 0;
    line-height: 1.3;
  }
  h3 {
    font-size: 12.5pt;
    color: var(--blu);
    margin: 8mm 0 3mm 0;
    line-height: 1.4;
  }
  h3:first-of-type { margin-top: 4mm; }

  p { margin: 3mm 0; }

  ul, ol {
    margin: 4mm 0 4mm 6mm;
    padding-left: 5mm;
  }
  li {
    margin: 2mm 0;
    line-height: 1.6;
  }
  li > ul, li > ol {
    margin: 1.5mm 0 1.5mm 5mm;
  }

  /* ============ CODICE ============ */
  pre {
    background: var(--code-bg);
    border: 0.8pt solid var(--code-border);
    border-left: 3pt solid var(--blu);
    border-radius: 4pt;
    padding: 5mm 6mm;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    font-size: 9.5pt;
    line-height: 1.6;
    margin: 5mm 0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    tab-size: 4;
    color: #333;
  }
  pre code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
  }
  p code, li code, td code, th code {
    background: var(--code-bg);
    border: 0.5pt solid var(--code-border);
    padding: 0.3mm 1.6mm;
    border-radius: 3pt;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    font-size: 9.5pt;
    color: #b32d2d;
  }

  /* ============ TOKEN COLORI (manuali) ============ */
  /* HTML */
  .tok-tag       { color: #1a4d7a; font-weight: 700; }   /* <form>, <input> */
  .tok-attr      { color: #b32d2d; }                     /* action, method */
  .tok-val       { color: #2a7d4f; }                     /* "ricevi.php" */
  .tok-punct     { color: #555; }                        /* <, >, /, = */
  .tok-comment   { color: #7a8a99; font-style: italic; } /* <!-- ... --> */
  /* PHP */
  .tok-phptag    { color: #b32d2d; font-weight: 700; }   /* <?php ?> */
  .tok-keyword   { color: #8b2bb5; font-weight: 700; }   /* function, if, echo, foreach */
  .tok-var       { color: #c66a1b; }                     /* $nome, $_GET */
  .tok-func      { color: #1a4d7a; }                     /* mostra, htmlspecialchars */
  .tok-str       { color: #2a7d4f; }                     /* "ciao" */
  .tok-num       { color: #b32d2d; }                     /* 1, 42 */

  /* ============ TABELLE ============ */
  table {
    border-collapse: collapse;
    width: 100%;
    margin: 5mm 0;
    font-size: 10pt;
    page-break-inside: avoid;
  }
  th, td {
    border: 0.7pt solid var(--bordo);
    padding: 3mm 4mm;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
  }
  th {
    background: var(--blu-chiaro);
    color: var(--blu);
    font-weight: 600;
  }
  tr:nth-child(even) td { background: #fafcfd; }

  /* ============ BOX ============ */
  .nota, .attenzione, .ok {
    padding: 4mm 5mm;
    margin: 5mm 0;
    border-radius: 3pt;
    font-size: 10pt;
    line-height: 1.6;
    page-break-inside: avoid;
  }
  .nota       { background: #fff8e6; border-left: 3.5pt solid var(--arancio); }
  .nota::before       { content: "💡 "; font-weight: bold; }
  .attenzione { background: #fdeaea; border-left: 3.5pt solid var(--rosso); }
  .attenzione::before { content: "⚠️ "; font-weight: bold; }
  .ok         { background: #e9f6ee; border-left: 3.5pt solid var(--verde); }
  .ok::before         { content: "✅ "; font-weight: bold; }

  /* ============ ESERCIZI ============ */
  .esercizio {
    border: 1.2pt solid var(--blu);
    border-radius: 5pt;
    padding: 6mm 7mm;
    margin: 6mm 0;
    background: #fbfdff;
    page-break-inside: avoid;
  }
  .esercizio h3 {
    margin: 0 0 3mm 0;
    color: var(--blu);
    font-size: 12pt;
  }
  .esercizio .numero {
    display: inline-block;
    background: var(--blu);
    color: #fff;
    padding: 1mm 3.5mm;
    border-radius: 4pt;
    font-size: 10pt;
    font-weight: bold;
    margin-right: 2mm;
  }
  .esercizio ol, .esercizio ul { margin: 3mm 0 3mm 5mm; }
  .esercizio p { margin: 3mm 0; }

  /* ============ UTILITÀ ============ */
  .piccolo { font-size: 9.5pt; color: #666; line-height: 1.55; }
  .centrato { text-align: center; }
  .spazio-sopra { margin-top: 8mm; }

  pre, table, .esercizio, .nota, .attenzione, .ok {
    page-break-inside: avoid;
  }
</style>
</head>
<body>

<!-- ================= TITOLO ================= -->
<section class="titolo-iniziale">
  <h1>I form HTML<br>e l'invio dei dati a PHP</h1>
</section>

<!-- ================= 1 ================= -->
<section class="slide">
  <h2>1. Cosa impariamo oggi</h2>
  <ul>
    <li>Cos'è un <strong>form HTML</strong> e a cosa serve</li>
    <li>Come il browser <strong>costruisce e invia</strong> i dati</li>
    <li>La differenza tra <strong>GET</strong> e <strong>POST</strong></li>
    <li>Cos'è <strong><code>$_REQUEST</code></strong> e perché è comodo ma rischioso</li>
    <li>Come <strong>osservare</strong> i dati arrivare a una pagina PHP (senza ancora scriverla)</li>
  </ul>
  <div class="nota">
    Oggi <strong>non studieremo PHP</strong>: lo useremo come "scatola nera" per vedere dove finiscono i dati che inviamo.
  </div>
</section>

<!-- ================= 2 ================= -->
<section class="slide">
  <h2>2. Il problema: come fa il browser a parlare col server?</h2>
  <ul>
    <li>Il browser richiede una pagina → il server risponde con HTML</li>
    <li>Finora: comunicazione <strong>a senso unico</strong></li>
    <li>Ma se voglio inviare un <strong>nome</strong>, una <strong>email</strong>, una <strong>ricerca</strong>, una <strong>password</strong>?</li>
  </ul>
  <p class="spazio-sopra" style="font-size:12pt;">
    <strong>Serve un meccanismo per inviare dati dal client al server.</strong>
  </p>
  <p style="font-size:12pt; color:var(--blu);"><strong>→ Il form HTML è quel meccanismo.</strong></p>
</section>

<!-- ================= 3 ================= -->
<section class="slide">
  <h2>3. Il protocollo HTTP in 30 secondi</h2>
  <p>Ogni richiesta HTTP ha:</p>
  <ul>
    <li>un <strong>metodo</strong> (GET, POST, …)</li>
    <li>un <strong>URL</strong></li>
    <li>eventuali <strong>dati</strong> (query string o corpo)</li>
    <li>degli <strong>header</strong></li>
  </ul>
  <p class="spazio-sopra">Il form HTML decide:</p>
  <ul>
    <li><strong>dove</strong> inviare i dati → attributo <code>action</code></li>
    <li><strong>come</strong> inviarli → attributo <code>method</code></li>
  </ul>
</section>

<!-- ================= 4 ================= -->
<section class="slide">
  <h2>4. Anatomia di un form</h2>
<pre><code>&lt;<span class="tok-tag">form</span> <span class="tok-attr">action</span><span class="tok-punct">=</span><span class="tok-val">"ricevi.php"</span> <span class="tok-attr">method</span><span class="tok-punct">=</span><span class="tok-val">"POST"</span>&gt;
    <span class="tok-comment">&lt;!-- qui vanno i campi --&gt;</span>
    &lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"text"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"nome"</span>&gt;
    &lt;<span class="tok-tag">button</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"submit"</span>&gt;Invia&lt;<span class="tok-punct">/</span><span class="tok-tag">button</span>&gt;
&lt;<span class="tok-punct">/</span><span class="tok-tag">form</span>&gt;</code></pre>
  <table>
    <tr><th>Attributo</th><th>Significato</th></tr>
    <tr><td><code>action</code></td><td>URL della pagina che riceve i dati</td></tr>
    <tr><td><code>method</code></td><td><code>GET</code> o <code>POST</code></td></tr>
    <tr><td><code>enctype</code></td><td>codifica (serve per upload file)</td></tr>
  </table>
</section>

<!-- ================= 5 ================= -->
<section class="slide">
  <h2>5. L'attributo <code>name</code>: la chiave del problema</h2>
  <p>Ogni campo che vogliamo inviare <strong>deve avere un <code>name</code></strong>.</p>
<pre><code>&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"text"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"cognome"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"Rossi"</span>&gt;</code></pre>
  <p>Il browser al submit crea la coppia:</p>
<pre><code>cognome <span class="tok-punct">=</span> Rossi</code></pre>
  <div class="attenzione">
    <strong>Senza <code>name</code> il campo NON viene inviato.</strong><br>
    È l'errore #1 degli studenti. Attenzione: <code>id</code> serve per label/CSS/JS, <code>name</code> serve per l'invio.
  </div>
</section>

<!-- ================= 6 ================= -->
<section class="slide">
  <h2>6. I principali tipi di input</h2>
  <table>
    <tr><th>Tipo</th><th>Esempio d'uso</th></tr>
    <tr><td><code>text</code></td><td>nome, cognome</td></tr>
    <tr><td><code>email</code></td><td>email (con validazione nativa)</td></tr>
    <tr><td><code>password</code></td><td>mascherato</td></tr>
    <tr><td><code>number</code></td><td>età, quantità</td></tr>
    <tr><td><code>date</code></td><td>data di nascita</td></tr>
    <tr><td><code>radio</code></td><td>scelta singola</td></tr>
    <tr><td><code>checkbox</code></td><td>scelta multipla</td></tr>
    <tr><td><code>hidden</code></td><td>dato invisibile all'utente</td></tr>
    <tr><td><code>file</code></td><td>upload (richiede <code>enctype</code>)</td></tr>
  </table>
</section>

<!-- ================= 7 ================= -->
<section class="slide">
  <h2>7. Un form completo (parte 1)</h2>
<pre><code>&lt;<span class="tok-tag">form</span> <span class="tok-attr">action</span><span class="tok-punct">=</span><span class="tok-val">"spia.php"</span> <span class="tok-attr">method</span><span class="tok-punct">=</span><span class="tok-val">"GET"</span>&gt;
    &lt;<span class="tok-tag">label</span> <span class="tok-attr">for</span><span class="tok-punct">=</span><span class="tok-val">"nome"</span>&gt;Nome:&lt;<span class="tok-punct">/</span><span class="tok-tag">label</span>&gt;
    &lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"text"</span> <span class="tok-attr">id</span><span class="tok-punct">=</span><span class="tok-val">"nome"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"nome"</span> <span class="tok-attr">required</span>&gt;

    &lt;<span class="tok-tag">label</span> <span class="tok-attr">for</span><span class="tok-punct">=</span><span class="tok-val">"email"</span>&gt;Email:&lt;<span class="tok-punct">/</span><span class="tok-tag">label</span>&gt;
    &lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"email"</span> <span class="tok-attr">id</span><span class="tok-punct">=</span><span class="tok-val">"email"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"email"</span>&gt;

    &lt;<span class="tok-tag">label</span> <span class="tok-attr">for</span><span class="tok-punct">=</span><span class="tok-val">"nascita"</span>&gt;Data di nascita:&lt;<span class="tok-punct">/</span><span class="tok-tag">label</span>&gt;
    &lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"date"</span> <span class="tok-attr">id</span><span class="tok-punct">=</span><span class="tok-val">"nascita"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"nascita"</span>&gt;</code></pre>
  <p><code>required</code> e <code>type="email"</code> attivano la <strong>validazione lato client</strong>.</p>
</section>

<!-- ================= 8 ================= -->
<section class="slide">
  <h2>8. Un form completo (parte 2)</h2>
<pre><code>    &lt;<span class="tok-tag">p</span>&gt;Sesso:&lt;<span class="tok-punct">/</span><span class="tok-tag">p</span>&gt;
    &lt;<span class="tok-tag">label</span>&gt;&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"radio"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"sesso"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"M"</span>&gt; M&lt;<span class="tok-punct">/</span><span class="tok-tag">label</span>&gt;
    &lt;<span class="tok-tag">label</span>&gt;&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"radio"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"sesso"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"F"</span>&gt; F&lt;<span class="tok-punct">/</span><span class="tok-tag">label</span>&gt;

    &lt;<span class="tok-tag">p</span>&gt;Linguaggi:&lt;<span class="tok-punct">/</span><span class="tok-tag">p</span>&gt;
    &lt;<span class="tok-tag">label</span>&gt;&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"checkbox"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"linguaggi[]"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"HTML"</span>&gt; HTML&lt;<span class="tok-punct">/</span><span class="tok-tag">label</span>&gt;
    &lt;<span class="tok-tag">label</span>&gt;&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"checkbox"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"linguaggi[]"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"CSS"</span>&gt; CSS&lt;<span class="tok-punct">/</span><span class="tok-tag">label</span>&gt;
    &lt;<span class="tok-tag">label</span>&gt;&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"checkbox"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"linguaggi[]"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"JS"</span>&gt; JS&lt;<span class="tok-punct">/</span><span class="tok-tag">label</span>&gt;

    &lt;<span class="tok-tag">label</span> <span class="tok-attr">for</span><span class="tok-punct">=</span><span class="tok-val">"corso"</span>&gt;Corso:&lt;<span class="tok-punct">/</span><span class="tok-tag">label</span>&gt;
    &lt;<span class="tok-tag">select</span> <span class="tok-attr">id</span><span class="tok-punct">=</span><span class="tok-val">"corso"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"corso"</span>&gt;
        &lt;<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">""</span>&gt;-- scegli --&lt;<span class="tok-punct">/</span><span class="tok-tag">option</span>&gt;
        &lt;<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"web"</span>&gt;Sviluppo Web&lt;<span class="tok-punct">/</span><span class="tok-tag">option</span>&gt;
        &lt;<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"db"</span>&gt;Basi di dati&lt;<span class="tok-punct">/</span><span class="tok-tag">option</span>&gt;
    &lt;<span class="tok-punct">/</span><span class="tok-tag">select</span>&gt;

    &lt;<span class="tok-tag">textarea</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"note"</span> <span class="tok-attr">rows</span><span class="tok-punct">=</span><span class="tok-val">"3"</span> <span class="tok-attr">cols</span><span class="tok-punct">=</span><span class="tok-val">"40"</span>&gt;&lt;<span class="tok-punct">/</span><span class="tok-tag">textarea</span>&gt;

    &lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"hidden"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"versione"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"1.0"</span>&gt;
    &lt;<span class="tok-tag">button</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"submit"</span>&gt;Invia&lt;<span class="tok-punct">/</span><span class="tok-tag">button</span>&gt;
&lt;<span class="tok-punct">/</span><span class="tok-tag">form</span>&gt;</code></pre>
  <div class="nota">
    Il <code>name="linguaggi[]"</code> (con le parentesi quadre) serve per inviare <strong>più valori</strong> dallo stesso gruppo.
  </div>
</section>

<!-- ================= 9 ================= -->
<section class="slide">
  <h2>9. Metodo GET</h2>
  <p>Il browser <strong>appende i dati all'URL</strong>:</p>
<pre><code>spia.php<span class="tok-punct">?</span>nome<span class="tok-punct">=</span>Mario<span class="tok-punct">&amp;</span>cognome<span class="tok-punct">=</span>Rossi<span class="tok-punct">&amp;</span>email<span class="tok-punct">=</span>mario@x.it</code></pre>
  <ul>
    <li>✅ visibile, condivisibile, bookmarkabile</li>
    <li>✅ utile per ricerche e filtri</li>
    <li>❌ lunghezza limitata (~2000 caratteri)</li>
    <li>❌ <strong>mai per dati sensibili</strong> (password, carte, …)</li>
  </ul>
</section>

<!-- ================= 10 ================= -->
<section class="slide">
  <h2>10. Metodo POST</h2>
  <p>Il browser <strong>mette i dati nel corpo della richiesta</strong>:</p>
<pre><code><span class="tok-tag">POST</span> /spia.php HTTP/1.1
<span class="tok-attr">Content-Type:</span> <span class="tok-val">application/x-www-form-urlencoded</span>

nome<span class="tok-punct">=</span>Mario<span class="tok-punct">&amp;</span>cognome<span class="tok-punct">=</span>Rossi<span class="tok-punct">&amp;</span>email<span class="tok-punct">=</span>mario@x.it</code></pre>
  <ul>
    <li>✅ URL pulito, dati non visibili in barra indirizzi</li>
    <li>✅ nessun limite pratico di lunghezza</li>
    <li>✅ obbligatorio per login, upload, dati sensibili</li>
    <li>❌ non bookmarkabile, ricaricare la pagina può reinviare i dati</li>
  </ul>
</section>

<!-- ================= 11 ================= -->
<section class="slide">
  <h2>11. GET vs POST: tabella riassuntiva</h2>
  <table>
    <tr><th></th><th>GET</th><th>POST</th></tr>
    <tr><td>Dove viaggiano</td><td>URL (query string)</td><td>Corpo della richiesta</td></tr>
    <tr><td>Visibili nell'URL</td><td>Sì</td><td>No</td></tr>
    <tr><td>Limite dimensione</td><td>~2000 caratteri</td><td>Nessuno pratico</td></tr>
    <tr><td>Bookmarkabile</td><td>Sì</td><td>No</td></tr>
    <tr><td>Idempotente</td><td>Sì</td><td>No</td></tr>
    <tr><td>Dati sensibili</td><td>❌</td><td>✅ (con HTTPS)</td></tr>
    <tr><td>Uso tipico</td><td>ricerche, filtri</td><td>login, iscrizioni, upload</td></tr>
  </table>
</section>

<!-- ================= 12 ================= -->
<section class="slide">
  <h2>12. <code>$_REQUEST</code>: il raccoglitore</h2>
  <p>In PHP, <code>$_REQUEST</code> è un array che contiene <strong>GET + POST + COOKIE</strong>.</p>
<pre><code><span class="tok-keyword">echo</span> <span class="tok-var">$_REQUEST</span>[<span class="tok-str">'nome'</span>];  <span class="tok-comment">// funziona sia con GET sia con POST</span></code></pre>
  <p><strong>Perché è comodo:</strong> un solo codice gestisce entrambi i metodi.</p>
  <p class="spazio-sopra"><strong>Perché è rischioso:</strong></p>
  <ul>
    <li>non sai da dove viene il dato</li>
    <li>conflitti silenziosi (se <code>nome</code> arriva sia in GET sia in POST)</li>
    <li>problemi di sicurezza (cookie injection)</li>
  </ul>
  <div class="ok">Buona pratica: <strong>usare <code>$_GET</code> o <code>$_POST</code> espliciti</strong>.</div>
</section>

<!-- ================= 13 ================= -->
<section class="slide">
  <h2>13. La pagina "spia" (scatola nera)</h2>
  <p>Salva questo file come <code>spia.php</code>. Non serve capirlo: serve a <strong>mostrare cosa arriva</strong>.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;<span class="tok-tag">html</span> <span class="tok-attr">lang</span><span class="tok-punct">=</span><span class="tok-val">"it"</span>&gt;
&lt;<span class="tok-tag">head</span>&gt;&lt;<span class="tok-tag">meta</span> <span class="tok-attr">charset</span><span class="tok-punct">=</span><span class="tok-val">"UTF-8"</span>&gt;&lt;<span class="tok-tag">title</span>&gt;Dati ricevuti&lt;<span class="tok-punct">/</span><span class="tok-tag">title</span>&gt;&lt;<span class="tok-punct">/</span><span class="tok-tag">head</span>&gt;
&lt;<span class="tok-tag">body</span>&gt;
    &lt;<span class="tok-tag">h1</span>&gt;Dati ricevuti&lt;<span class="tok-punct">/</span><span class="tok-tag">h1</span>&gt;
    &lt;<span class="tok-tag">p</span>&gt;Metodo: &lt;<span class="tok-tag">strong</span>&gt;<span class="tok-phptag">&lt;?php</span> <span class="tok-keyword">echo</span> <span class="tok-var">$_SERVER</span>[<span class="tok-str">'REQUEST_METHOD'</span>]; <span class="tok-phptag">?&gt;</span>&lt;<span class="tok-punct">/</span><span class="tok-tag">strong</span>&gt;&lt;<span class="tok-punct">/</span><span class="tok-tag">p</span>&gt;

    <span class="tok-phptag">&lt;?php</span>
    <span class="tok-keyword">function</span> <span class="tok-func">mostra</span>(<span class="tok-var">$titolo</span>, <span class="tok-var">$arr</span>) {
        <span class="tok-keyword">echo</span> <span class="tok-str">"&lt;h2&gt;$titolo&lt;/h2&gt;"</span>;
        <span class="tok-keyword">if</span> (<span class="tok-func">empty</span>(<span class="tok-var">$arr</span>)) { <span class="tok-keyword">echo</span> <span class="tok-str">"&lt;p&gt;&lt;em&gt;nessun dato&lt;/em&gt;&lt;/p&gt;"</span>; <span class="tok-keyword">return</span>; }
        <span class="tok-keyword">echo</span> <span class="tok-str">"&lt;table border='1' cellpadding='6'&gt;"</span>;
        <span class="tok-keyword">foreach</span> (<span class="tok-var">$arr</span> <span class="tok-keyword">as</span> <span class="tok-var">$k</span> <span class="tok-punct">=&gt;</span> <span class="tok-var">$v</span>) {
            <span class="tok-var">$val</span> <span class="tok-punct">=</span> <span class="tok-func">is_array</span>(<span class="tok-var">$v</span>) <span class="tok-punct">?</span> <span class="tok-func">implode</span>(<span class="tok-str">', '</span>, <span class="tok-var">$v</span>) <span class="tok-punct">:</span> <span class="tok-var">$v</span>;
            <span class="tok-keyword">echo</span> <span class="tok-str">"&lt;tr&gt;&lt;td&gt;"</span> . <span class="tok-func">htmlspecialchars</span>(<span class="tok-var">$k</span>) . <span class="tok-str">"&lt;/td&gt;"</span>
               . <span class="tok-str">"&lt;td&gt;"</span> . <span class="tok-func">htmlspecialchars</span>(<span class="tok-var">$val</span>) . <span class="tok-str">"&lt;/td&gt;&lt;/tr&gt;"</span>;
        }
        <span class="tok-keyword">echo</span> <span class="tok-str">"&lt;/table&gt;"</span>;
    }
    <span class="tok-func">mostra</span>(<span class="tok-str">'$_GET'</span>, <span class="tok-var">$_GET</span>);
    <span class="tok-func">mostra</span>(<span class="tok-str">'$_POST'</span>, <span class="tok-var">$_POST</span>);
    <span class="tok-func">mostra</span>(<span class="tok-str">'$_REQUEST'</span>, <span class="tok-var">$_REQUEST</span>);
    <span class="tok-phptag">?&gt;</span>
&lt;<span class="tok-punct">/</span><span class="tok-tag">body</span>&gt;
&lt;<span class="tok-punct">/</span><span class="tok-tag">html</span>&gt;</code></pre>
</section>

<!-- ================= 14 ================= -->
<section class="slide">
  <h2>14. Demo live: form in GET</h2>
  <ol>
    <li>Apriamo <code>modulo.html</code></li>
    <li>Compiliamo i campi</li>
    <li>Inviamo</li>
    <li>Guardiamo <strong>l'URL</strong>:</li>
  </ol>
<pre><code>spia.php<span class="tok-punct">?</span>nome<span class="tok-punct">=</span>Mario<span class="tok-punct">&amp;</span>cognome<span class="tok-punct">=</span>Rossi<span class="tok-punct">&amp;</span>email<span class="tok-punct">=</span>mario@x.it
   <span class="tok-punct">&amp;</span>sesso<span class="tok-punct">=</span>M<span class="tok-punct">&amp;</span>linguaggi[]<span class="tok-punct">=</span>HTML<span class="tok-punct">&amp;</span>linguaggi[]<span class="tok-punct">=</span>CSS</code></pre>
  <ol start="5">
    <li>Nella pagina vediamo i dati in <strong><code>$_GET</code></strong> e in <strong><code>$_REQUEST</code></strong> (ma <code>$_POST</code> è vuoto)</li>
  </ol>
  <div class="nota">
    Fai notare il <code>?</code> che separa URL e query string, e le <code>&amp;</code> che separano i campi.
  </div>
</section>

<!-- ================= 15 ================= -->
<section class="slide">
  <h2>15. Demo live: form in POST</h2>
  <p>Cambiamo solo una riga:</p>
<pre><code>&lt;<span class="tok-tag">form</span> <span class="tok-attr">action</span><span class="tok-punct">=</span><span class="tok-val">"spia.php"</span> <span class="tok-attr">method</span><span class="tok-punct">=</span><span class="tok-val">"POST"</span>&gt;</code></pre>
  <p>Ora:</p>
  <ul>
    <li>l'URL resta <strong>pulito</strong> (<code>spia.php</code>)</li>
    <li><code>$_POST</code> si popola</li>
    <li><code>$_GET</code> è vuoto</li>
  </ul>
  <div class="nota">
    Apri DevTools → Network → clicca la richiesta → mostra il <strong>payload</strong> del POST.
  </div>
</section>

<!-- ================= 16 ================= -->
<section class="slide">
  <h2>16. URL encoding</h2>
  <p>Alcuni caratteri nell'URL devono essere codificati:</p>
  <table>
    <tr><th>Carattere</th><th>Diventa</th></tr>
    <tr><td>spazio</td><td><code>+</code> oppure <code>%20</code></td></tr>
    <tr><td><code>à</code></td><td><code>%C3%A0</code></td></tr>
    <tr><td><code>&amp;</code></td><td><code>%26</code></td></tr>
    <tr><td><code>?</code></td><td><code>%3F</code></td></tr>
  </table>
<pre><code>nome<span class="tok-punct">=</span>Maria Grazia   <span class="tok-punct">→</span>   nome<span class="tok-punct">=</span>Maria+Grazia</code></pre>
  <p>Lo fa <strong>automaticamente</strong> il browser. PHP lo decodifica automaticamente.</p>
</section>

<!-- ================= 17 ================= -->
<section class="slide">
  <h2>17. Campi hidden</h2>
<pre><code>&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"hidden"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"versione"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"1.0"</span>&gt;
&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"hidden"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"id_utente"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"42"</span>&gt;</code></pre>
  <ul>
    <li>Non visibili all'utente</li>
    <li><strong>Ma presenti nell'invio</strong> (e visibili in GET / DevTools!)</li>
  </ul>
  <div class="attenzione">
    Un campo hidden <strong>non è sicuro</strong>: l'utente può modificarlo. Serve per passare dati tecnici, non per nascondere segreti.
  </div>
</section>

<!-- ================= 18 ================= -->
<section class="slide">
  <h2>18. Checkbox multiple e radio</h2>
  <h3>Checkbox multiple → array</h3>
<pre><code>&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"checkbox"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"linguaggi[]"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"HTML"</span>&gt;
&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"checkbox"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"linguaggi[]"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"CSS"</span>&gt;
&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"checkbox"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"linguaggi[]"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"JS"</span>&gt;</code></pre>
  <p>Se selezioni HTML e JS, PHP riceve un <strong>array</strong>. Senza <code>[]</code> riceverebbe solo l'ultimo valore.</p>

  <h3>Radio → scelta singola</h3>
<pre><code>&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"radio"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"sesso"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"M"</span>&gt; M
&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"radio"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"sesso"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"F"</span>&gt; F</code></pre>
  <p>Stesso <code>name</code> → il browser invia <strong>un solo valore</strong>. Se non selezioni nulla, il campo <strong>non viene inviato</strong>.</p>
</section>

<!-- ================= 19 ================= -->
<section class="slide">
  <h2>19. Select e textarea</h2>
<pre><code>&lt;<span class="tok-tag">select</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"corso"</span>&gt;
    &lt;<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">""</span>&gt;-- scegli --&lt;<span class="tok-punct">/</span><span class="tok-tag">option</span>&gt;
    &lt;<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"web"</span>&gt;Sviluppo Web&lt;<span class="tok-punct">/</span><span class="tok-tag">option</span>&gt;
    &lt;<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"db"</span>&gt;Basi di dati&lt;<span class="tok-punct">/</span><span class="tok-tag">option</span>&gt;
&lt;<span class="tok-punct">/</span><span class="tok-tag">select</span>&gt;

&lt;<span class="tok-tag">textarea</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"note"</span> <span class="tok-attr">rows</span><span class="tok-punct">=</span><span class="tok-val">"3"</span> <span class="tok-attr">cols</span><span class="tok-punct">=</span><span class="tok-val">"40"</span>&gt;&lt;<span class="tok-punct">/</span><span class="tok-tag">textarea</span>&gt;</code></pre>
  <ul>
    <li><code>select</code>: singola scelta (o multipla con <code>multiple</code>)</li>
    <li><code>textarea</code>: testo lungo, inviato come stringa</li>
  </ul>
</section>

<!-- ================= 20 ================= -->
<section class="slide">
  <h2>20. Validazione lato client</h2>
  <p>HTML5 offre validazione <strong>gratis</strong>:</p>
<pre><code>&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"text"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"nome"</span> <span class="tok-attr">required</span>&gt;
&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"email"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"email"</span>&gt;
&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"number"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"eta"</span> <span class="tok-attr">min</span><span class="tok-punct">=</span><span class="tok-val">"14"</span> <span class="tok-attr">max</span><span class="tok-punct">=</span><span class="tok-val">"99"</span>&gt;
&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"text"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"cf"</span>
       <span class="tok-attr">pattern</span><span class="tok-punct">=</span><span class="tok-val">"[A-Z]{6}[0-9]{2}[A-Z][0-9]{2}[A-Z][0-9]{3}[A-Z]"</span>&gt;</code></pre>
  <p>Il browser <strong>blocca il submit</strong> se i dati non sono validi.</p>
  <div class="attenzione">
    <strong>Non basta!</strong> La validazione HTML5 si può bypassare. Il server <strong>deve sempre rivalidare</strong>.
  </div>
</section>

<!-- ================= 21 ================= -->
<section class="slide">
  <h2>21. Guardiamo la richiesta HTTP</h2>
  <p>Apriamo <strong>DevTools (F12) → Network</strong>:</p>
  <ol>
    <li>Compila e invia il form</li>
    <li>Clicca la richiesta <code>spia.php</code></li>
    <li>Osserva:
      <ul>
        <li><strong>Headers</strong> → metodo, URL, content-type</li>
        <li><strong>Payload</strong> (per POST) → i dati inviati</li>
        <li><strong>Query String</strong> (per GET) → i parametri nell'URL</li>
      </ul>
    </li>
  </ol>
  <div class="nota">
    È il momento "aha!" della lezione. Fai vedere GET e POST a confronto.
  </div>
</section>

<!-- ================= 22 ================= -->
<section class="slide">
  <h2>22. Errori comuni</h2>

  <h3>Errore #1 — Dimenticare il <code>name</code></h3>
<pre><code>&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"text"</span> <span class="tok-attr">id</span><span class="tok-punct">=</span><span class="tok-val">"nome"</span>&gt;            <span class="tok-comment">&lt;!-- ❌ non viene inviato --&gt;</span>
&lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"text"</span> <span class="tok-attr">id</span><span class="tok-punct">=</span><span class="tok-val">"nome"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"nome"</span>&gt; <span class="tok-comment">&lt;!-- ✅ --&gt;</span></code></pre>
  <p class="piccolo">Il campo sparisce silenziosamente: nessun errore, semplicemente non arriva.</p>

  <h3>Errore #2 — Usare GET per dati sensibili</h3>
<pre><code>&lt;<span class="tok-tag">form</span> <span class="tok-attr">action</span><span class="tok-punct">=</span><span class="tok-val">"login.php"</span> <span class="tok-attr">method</span><span class="tok-punct">=</span><span class="tok-val">"GET"</span>&gt;   <span class="tok-comment">&lt;!-- ❌ --&gt;</span>
    &lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"password"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"pwd"</span>&gt;
&lt;<span class="tok-punct">/</span><span class="tok-tag">form</span>&gt;</code></pre>
  <p class="piccolo">Risultato nell'URL: <code>login.php?user=mario&amp;pwd=segretissima</code> → visibile in barra, cronologia, log del server.</p>

  <h3>Errore #3 — Dimenticare <code>[]</code> nelle checkbox multiple</h3>
  <p class="piccolo">Con <code>name="linguaggi"</code> arriva solo l'ultimo selezionato. Con <code>name="linguaggi[]"</code> arrivano tutti.</p>
</section>

<!-- ================= 23 ================= -->
<section class="slide">
  <h2>23. Riepilogo concetti</h2>
  <ul>
    <li>Il <strong>form</strong> è il meccanismo con cui il client invia dati</li>
    <li><code>action</code> = dove, <code>method</code> = come</li>
    <li>Ogni campo ha un <strong><code>name</code></strong> (chiave) e un <strong><code>value</code></strong> (valore)</li>
    <li><strong>GET</strong> → dati nell'URL, <strong>POST</strong> → dati nel corpo</li>
    <li><strong><code>$_REQUEST</code></strong> raccoglie GET + POST + cookie (usare con cautela)</li>
    <li>La validazione HTML5 è comoda ma <strong>non sufficiente</strong></li>
  </ul>
</section>

<!-- ================= ESERCIZI 1 ================= -->
<section class="slide">
  <h2>Esercizi — parte 1</h2>

  <div class="esercizio">
    <h3><span class="numero">1</span> GET vs POST</h3>
    <p>Prendi il form della slide 8.</p>
    <ol>
      <li>Invia con <code>GET</code>. Copia l'URL e incollalo in una nuova scheda. Cosa succede?</li>
      <li>Cambia in <code>POST</code>. Ripeti l'esperimento. Cosa cambia?</li>
      <li>Apri DevTools → Network in entrambi i casi e annota le differenze.</li>
    </ol>
    <p class="piccolo"><strong>Obiettivo:</strong> capire visivamente dove viaggiano i dati.</p>
  </div>

  <div class="esercizio">
    <h3><span class="numero">2</span> Il campo fantasma</h3>
    <ol>
      <li>Apri il form</li>
      <li>Rimuovi l'attributo <code>name</code> da <strong>un solo campo</strong></li>
      <li>Invia</li>
      <li>Osserva la tabella dei dati ricevuti</li>
    </ol>
    <p><strong>Domanda:</strong> perché quel campo non compare?</p>
  </div>

  <div class="esercizio">
    <h3><span class="numero">3</span> Checkbox multiple</h3>
    <ol>
      <li>Nel form, seleziona <strong>più linguaggi</strong></li>
      <li>Invia e osserva come appare <code>linguaggi[]</code> nella pagina spia</li>
      <li>Ora cambia in <code>name="linguaggi"</code> (senza <code>[]</code>)</li>
      <li>Ripeti: cosa cambia?</li>
    </ol>
    <p class="piccolo"><strong>Obiettivo:</strong> capire il ruolo delle parentesi quadre.</p>
  </div>

  <div class="esercizio">
    <h3><span class="numero">4</span> Campo hidden</h3>
    <ol>
      <li>Aggiungi al form: <code>&lt;input type="hidden" name="token" value="abc123"&gt;</code></li>
      <li>Invia con <strong>GET</strong> → il valore è visibile nell'URL?</li>
      <li>Invia con <strong>POST</strong> → è visibile?</li>
      <li>In entrambi i casi, arriva al server?</li>
    </ol>
    <p><strong>Riflessione:</strong> un campo hidden è davvero "nascosto"?</p>
  </div>
</section>

<!-- ================= ESERCIZI 2 ================= -->
<section class="slide">
  <h2>Esercizi — parte 2</h2>

  <div class="esercizio">
    <h3><span class="numero">5</span> Validazione nativa</h3>
    <ol>
      <li>Aggiungi <code>required</code> a un campo</li>
      <li>Prova a inviare vuoto → cosa fa il browser?</li>
      <li>Aggiungi <code>type="email"</code> e inserisci un valore tipo <code>abc</code></li>
      <li>Aggiungi <code>pattern="[0-9]{5}"</code> a un campo CAP</li>
    </ol>
    <p><strong>Domanda:</strong> perché questa validazione <strong>non sostituisce</strong> quella lato server?</p>
  </div>

  <div class="esercizio">
    <h3><span class="numero">6</span> Progettazione</h3>
    <p>Progetta un form di <strong>ricerca libri</strong> con:</p>
    <ul>
      <li>titolo (text)</li>
      <li>autore (text)</li>
      <li>anno (number, min 1900)</li>
      <li>genere (select: romanzo, saggio, poesia, altro)</li>
      <li>disponibile (radio Sì/No)</li>
    </ul>
    <p><strong>Domande:</strong></p>
    <ol>
      <li>Quale metodo scegli, GET o POST? <strong>Motiva.</strong></li>
      <li>Quali campi metti <code>required</code>?</li>
      <li>Come chiameresti il file <code>action</code>?</li>
    </ol>
  </div>

  <div class="esercizio">
    <h3><span class="numero">7</span> Due form, una pagina (avanzato)</h3>
    <ol>
      <li>Crea <strong>due form</strong> nella stessa pagina HTML, entrambi con <code>action="spia.php"</code></li>
      <li>Uno con <code>method="GET"</code>, l'altro con <code>method="POST"</code></li>
      <li>Invia prima uno, poi l'altro</li>
      <li>Osserva cosa cambia nella pagina spia</li>
    </ol>
    <p class="piccolo"><strong>Obiettivo:</strong> capire che <code>action</code> e <code>method</code> sono proprietà <strong>del singolo form</strong>, non della pagina.</p>
  </div>

  <div class="esercizio">
    <h3><span class="numero">8</span> Debug</h3>
    <p>Trova e correggi gli errori:</p>
<pre><code>&lt;<span class="tok-tag">form</span> <span class="tok-attr">action</span><span class="tok-punct">=</span><span class="tok-val">"ricevi.php"</span> <span class="tok-attr">method</span><span class="tok-punct">=</span><span class="tok-val">"POST"</span>&gt;
    &lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"text"</span> <span class="tok-attr">id</span><span class="tok-punct">=</span><span class="tok-val">"nome"</span>&gt;
    &lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"email"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"email"</span>&gt;
    &lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"checkbox"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"hobby"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"sport"</span>&gt;
    &lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"checkbox"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"hobby"</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"musica"</span>&gt;
    &lt;<span class="tok-tag">input</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"password"</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"pwd"</span> <span class="tok-attr">method</span><span class="tok-punct">=</span><span class="tok-val">"GET"</span>&gt;
    &lt;<span class="tok-tag">button</span>&gt;Invia&lt;<span class="tok-punct">/</span><span class="tok-tag">button</span>&gt;
&lt;<span class="tok-punct">/</span><span class="tok-tag">form</span>&gt;</code></pre>
    <p class="piccolo">Errori nascosti: manca <code>name</code> sul nome; checkbox senza <code>[]</code>; <code>method</code> sull'input è invalido; button senza <code>type</code>.</p>
  </div>
</section>

<!-- ================= SICUREZZA ================= -->
<section class="slide">
  <h2>Sicurezza: primi accenni</h2>
  <ul>
    <li><strong>GET</strong> → dati in chiaro nell'URL: mai password, mai token</li>
    <li><strong>POST</strong> → più riservato, ma viaggia comunque in chiaro senza <strong>HTTPS</strong></li>
    <li>I dati arrivano <strong>dall'esterno</strong>: non fidarsi mai</li>
    <li>La validazione HTML5 è solo "cortesia" verso l'utente</li>
    <li><strong>La validazione vera si fa sul server</strong> (lo vedremo con PHP)</li>
  </ul>
</section>

<!-- ================= QUIZ ================= -->
<section class="slide">
  <h2>Quiz di fine lezione</h2>
  <ol>
    <li>Quale attributo identifica un campo nell'invio?</li>
    <li>Differenza principale GET/POST?</li>
    <li>Cosa contiene <code>$_REQUEST</code>?</li>
    <li>Perché non usare GET per una password?</li>
    <li>Cosa fa <code>name="interessi[]"</code>?</li>
    <li>Un campo <code>hidden</code> è sicuro?</li>
  </ol>
  <div class="ok">
    <strong>Risposte:</strong> 1) <code>name</code> · 2) URL vs corpo · 3) GET+POST+cookie · 4) visibile in URL e log · 5) crea un array di valori · 6) no, è modificabile dall'utente
  </div>
</section>

<!-- ================= PROSSIMA ================= -->
<section class="slide">
  <h2>Cosa vedremo la prossima volta</h2>
  <ul>
    <li>Come <strong>leggere</strong> i dati in PHP: <code>$_GET</code>, <code>$_POST</code>, <code>$_REQUEST</code></li>
    <li><strong>Validazione lato server</strong></li>
    <li><strong>Sanificazione</strong> dell'input (<code>htmlspecialchars</code>, filtri)</li>
    <li>Invio di <strong>email</strong> da un form</li>
    <li>Upload di <strong>file</strong></li>
  </ul>
</section>

<!-- ================= RIFERIMENTI ================= -->
<section class="slide">
  <h2>Riferimenti utili</h2>
  <ul>
    <li>MDN — <code>&lt;form&gt;</code>: <span class="piccolo">https://developer.mozilla.org/it/docs/Web/HTML/Element/form</span></li>
    <li>MDN — Input types: <span class="piccolo">https://developer.mozilla.org/it/docs/Web/HTML/Element/input</span></li>
    <li>W3Schools — Forms: <span class="piccolo">https://www.w3schools.com/html/html_forms.asp</span></li>
    <li>MDN — HTTP methods: <span class="piccolo">https://developer.mozilla.org/it/docs/Web/HTTP/Methods</span></li>
  </ul>
  <p class="spazio-sopra centrato" style="font-size:14pt;"><strong>Grazie!</strong><br>Domande?</p>
</section>

</body>
</html>