Primo modulo form

1. Il concetto, spiegato da zero

Un modulo raccoglie valori che la persona inserisce e definisce come inviarli.

form contiene campi e pulsanti. action indica la destinazione e method il metodo HTTP. Nel laboratorio evitiamo di inviare dati a un server reale.

2. Un esempio ragionato

Osserva l’esempio e leggi ogni istruzione nell’ordine. Prima di provarlo, fermati a prevedere cosa succederà; capire il motivo del risultato è più importante che memorizzare la sintassi.

<form onsubmit="event.preventDefault()">
 <label for="nome">Nome</label>
 <input id="nome" name="nome">
 <button type="submit">Invia</button>
</form>

Come leggere questo esempio

1. Prima di eseguire, immagina come apparirà il risultato nel browser.
2. Spiega con parole tue in che modo “primo modulo form” risolve un problema concreto.
3. Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
4. Modifica un valore; confronta il comportamento e annota che cosa è cambiato.

3. Adesso tocca a te

Obiettivo dell’esercizio: Crea un modulo con label collegata a input e bottone.

Puoi partire dall’esempio, riprodurlo e poi modificarlo. La soluzione di riferimento è disponibile sotto, ma conviene aprirla soltanto dopo un primo tentativo.

Il risultato comparirà qui.

<form onsubmit="event.preventDefault()">
 <label for="nome">Nome</label>
 <input id="nome" name="nome">
 <button type="submit">Invia</button>
</form>

4. Verifica e ripasso

5. Come proseguire

Prima del capitolo successivo, prova a spiegare il concetto a un amico senza leggere il codice. Se non riesci, torna all’esempio e fai una nuova variante: imparare significa anche sperimentare.