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><<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>>
<span class="tok-comment"><!-- qui vanno i campi --></span>
<<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-tag">button</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"submit"</span>>Invia<<span class="tok-punct">/</span><span class="tok-tag">button</span>>
<<span class="tok-punct">/</span><span class="tok-tag">form</span>></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><<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>></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><<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>>
<<span class="tok-tag">label</span> <span class="tok-attr">for</span><span class="tok-punct">=</span><span class="tok-val">"nome"</span>>Nome:<<span class="tok-punct">/</span><span class="tok-tag">label</span>>
<<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>>
<<span class="tok-tag">label</span> <span class="tok-attr">for</span><span class="tok-punct">=</span><span class="tok-val">"email"</span>>Email:<<span class="tok-punct">/</span><span class="tok-tag">label</span>>
<<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>>
<<span class="tok-tag">label</span> <span class="tok-attr">for</span><span class="tok-punct">=</span><span class="tok-val">"nascita"</span>>Data di nascita:<<span class="tok-punct">/</span><span class="tok-tag">label</span>>
<<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>></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> <<span class="tok-tag">p</span>>Sesso:<<span class="tok-punct">/</span><span class="tok-tag">p</span>>
<<span class="tok-tag">label</span>><<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>> M<<span class="tok-punct">/</span><span class="tok-tag">label</span>>
<<span class="tok-tag">label</span>><<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>> F<<span class="tok-punct">/</span><span class="tok-tag">label</span>>
<<span class="tok-tag">p</span>>Linguaggi:<<span class="tok-punct">/</span><span class="tok-tag">p</span>>
<<span class="tok-tag">label</span>><<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>> HTML<<span class="tok-punct">/</span><span class="tok-tag">label</span>>
<<span class="tok-tag">label</span>><<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>> CSS<<span class="tok-punct">/</span><span class="tok-tag">label</span>>
<<span class="tok-tag">label</span>><<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>> JS<<span class="tok-punct">/</span><span class="tok-tag">label</span>>
<<span class="tok-tag">label</span> <span class="tok-attr">for</span><span class="tok-punct">=</span><span class="tok-val">"corso"</span>>Corso:<<span class="tok-punct">/</span><span class="tok-tag">label</span>>
<<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>>
<<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">""</span>>-- scegli --<<span class="tok-punct">/</span><span class="tok-tag">option</span>>
<<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"web"</span>>Sviluppo Web<<span class="tok-punct">/</span><span class="tok-tag">option</span>>
<<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"db"</span>>Basi di dati<<span class="tok-punct">/</span><span class="tok-tag">option</span>>
<<span class="tok-punct">/</span><span class="tok-tag">select</span>>
<<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>><<span class="tok-punct">/</span><span class="tok-tag">textarea</span>>
<<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>>
<<span class="tok-tag">button</span> <span class="tok-attr">type</span><span class="tok-punct">=</span><span class="tok-val">"submit"</span>>Invia<<span class="tok-punct">/</span><span class="tok-tag">button</span>>
<<span class="tok-punct">/</span><span class="tok-tag">form</span>></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">&</span>cognome<span class="tok-punct">=</span>Rossi<span class="tok-punct">&</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">&</span>cognome<span class="tok-punct">=</span>Rossi<span class="tok-punct">&</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><!DOCTYPE html>
<<span class="tok-tag">html</span> <span class="tok-attr">lang</span><span class="tok-punct">=</span><span class="tok-val">"it"</span>>
<<span class="tok-tag">head</span>><<span class="tok-tag">meta</span> <span class="tok-attr">charset</span><span class="tok-punct">=</span><span class="tok-val">"UTF-8"</span>><<span class="tok-tag">title</span>>Dati ricevuti<<span class="tok-punct">/</span><span class="tok-tag">title</span>><<span class="tok-punct">/</span><span class="tok-tag">head</span>>
<<span class="tok-tag">body</span>>
<<span class="tok-tag">h1</span>>Dati ricevuti<<span class="tok-punct">/</span><span class="tok-tag">h1</span>>
<<span class="tok-tag">p</span>>Metodo: <<span class="tok-tag">strong</span>><span class="tok-phptag"><?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">?></span><<span class="tok-punct">/</span><span class="tok-tag">strong</span>><<span class="tok-punct">/</span><span class="tok-tag">p</span>>
<span class="tok-phptag"><?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">"<h2>$titolo</h2>"</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">"<p><em>nessun dato</em></p>"</span>; <span class="tok-keyword">return</span>; }
<span class="tok-keyword">echo</span> <span class="tok-str">"<table border='1' cellpadding='6'>"</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">=></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">"<tr><td>"</span> . <span class="tok-func">htmlspecialchars</span>(<span class="tok-var">$k</span>) . <span class="tok-str">"</td>"</span>
. <span class="tok-str">"<td>"</span> . <span class="tok-func">htmlspecialchars</span>(<span class="tok-var">$val</span>) . <span class="tok-str">"</td></tr>"</span>;
}
<span class="tok-keyword">echo</span> <span class="tok-str">"</table>"</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">?></span>
<<span class="tok-punct">/</span><span class="tok-tag">body</span>>
<<span class="tok-punct">/</span><span class="tok-tag">html</span>></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">&</span>cognome<span class="tok-punct">=</span>Rossi<span class="tok-punct">&</span>email<span class="tok-punct">=</span>mario@x.it
<span class="tok-punct">&</span>sesso<span class="tok-punct">=</span>M<span class="tok-punct">&</span>linguaggi[]<span class="tok-punct">=</span>HTML<span class="tok-punct">&</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>&</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><<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>></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>&</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><<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>>
<<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>></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><<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>>
<<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>>
<<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>></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><<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>> M
<<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>> 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><<span class="tok-tag">select</span> <span class="tok-attr">name</span><span class="tok-punct">=</span><span class="tok-val">"corso"</span>>
<<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">""</span>>-- scegli --<<span class="tok-punct">/</span><span class="tok-tag">option</span>>
<<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"web"</span>>Sviluppo Web<<span class="tok-punct">/</span><span class="tok-tag">option</span>>
<<span class="tok-tag">option</span> <span class="tok-attr">value</span><span class="tok-punct">=</span><span class="tok-val">"db"</span>>Basi di dati<<span class="tok-punct">/</span><span class="tok-tag">option</span>>
<<span class="tok-punct">/</span><span class="tok-tag">select</span>>
<<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>><<span class="tok-punct">/</span><span class="tok-tag">textarea</span>></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><<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>>
<<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>>
<<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>>
<<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>></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><<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-comment"><!-- ❌ non viene inviato --></span>
<<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-comment"><!-- ✅ --></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><<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>> <span class="tok-comment"><!-- ❌ --></span>
<<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-punct">/</span><span class="tok-tag">form</span>></code></pre>
<p class="piccolo">Risultato nell'URL: <code>login.php?user=mario&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><input type="hidden" name="token" value="abc123"></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><<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>>
<<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-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>>
<<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>>
<<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>>
<<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>>
<<span class="tok-tag">button</span>>Invia<<span class="tok-punct">/</span><span class="tok-tag">button</span>>
<<span class="tok-punct">/</span><span class="tok-tag">form</span>></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><form></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>