Lezione 4: Creare Moduli – Perché Chiedere l'Email Online è Meno Imbarazzante

Lesson4

Lezione 4: Creare Moduli – Perché Chiedere l’Email Online è Meno Imbarazzante

Benvenuto nella Lezione 4! La tua pagina web ha immagini e link, ma adesso è il momento di renderla più interattiva. Come? Creando dei moduli! Che tu voglia raccogliere email, fare sondaggi, o finalmente capire se la pizza con l’ananas ha dei sostenitori (spoiler: sì), i moduli HTML sono il tuo strumento perfetto. E la parte migliore? Non devi affrontare nessuno faccia a faccia!

Il Tag <form>: Il Supereroe dei Moduli

In HTML, i moduli si creano con il tag <form>. È come una scatola magica dove gli utenti inseriscono dati e tu li ricevi (con stile). Ecco la struttura base:

<form action="url-del-tuo-server" method="post">
    <!-- Qui vanno gli elementi del modulo -->
</form>
  • action: È dove verranno inviati i dati del modulo (solitamente a un server).
  • method: Solitamente userai post (i dati vengono inviati in modo “nascosto”) o get (i dati appaiono nell’URL, un po’ come quando cerchi su Google).

Esempio Base:

<form action="/invia" method="post">
    <!-- Elementi del modulo -->
    <input type="text" name="nome" placeholder="Il tuo nome">
    <input type="email" name="email" placeholder="La tua email">
    <button type="submit">Invia</button>
</form>

Compito: Crea il Tuo Primo Modulo

Prova a creare un modulo base per raccogliere nome ed email. Non preoccuparti se non hai un server per inviare i dati—stiamo solo imparando come si fa senza troppa pressione!

Campi di Input: Il Cuore del Modulo

I moduli non funzionano senza campi di input—sono quegli spazi in cui le persone possono inserire le loro informazioni. HTML ti dà un sacco di tipi di input, ecco i più comuni:

  • <input type="text"> per inserire testo (come il nome).
  • <input type="email"> per far inserire un’email valida (teoricamente).
  • <input type="password"> per campi nascosti (come le password o il PIN del tuo bancomat… forse meglio non quello).

Esempio con Vari Input:

<form action="/invia" method="post">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" placeholder="Il tuo nome">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="La tua email">
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" placeholder="Inserisci la tua password">
    
    <button type="submit">Registrati</button>
</form>

Compito: Aggiungi Più Campi di Input

Crea un modulo che chieda nome, email e password. Vuoi essere creativo? Chiedi il loro colore preferito o il parere sulla pizza con l’ananas (questo argomento non finirà mai).

Radio Button e Checkbox: Le Grandi Scelte della Vita

Vuoi che i tuoi visitatori facciano delle scelte? Usa i radio button o le checkbox:

  • Radio button: Gli utenti possono scegliere solo una delle opzioni.
  • Checkbox: Gli utenti possono selezionare più opzioni (per quelli che non sanno decidere).

Esempio con Radio Button e Checkbox:

<form action="/invia" method="post">
    <label>Scegli il tuo colore preferito:</label><br>
    <input type="radio" id="rosso" name="colore" value="rosso">
    <label for="rosso">Rosso</label><br>
    
    <input type="radio" id="blu" name="colore" value="blu">
    <label for="blu">Blu</label><br>
    
    <label>Seleziona le tue pizze preferite:</label><br>
    <input type="checkbox" id="margherita" name="pizza" value="margherita">
    <label for="margherita">Margherita</label><br>
    
    <input type="checkbox" id="diavola" name="pizza" value="diavola">
    <label for="diavola">Diavola</label><br>
    
    <button type="submit">Invia</button>
</form>

Compito: Aggiungi Radio Button e Checkbox

Crea un modulo che permetta agli utenti di scegliere il loro colore preferito e selezionare le loro pizze preferite. Perché, alla fine, tutto gira intorno alla pizza!

Ospitare la Tua Pagina con Caddy

Ora che hai aggiunto un modulo alla tua pagina, è tempo di ospitarlo con Caddy. Ecco come fare:

Passo 1: Apri il Terminale

Naviga nella cartella in cui hai salvato il tuo file HTML:

cd ~/my-website

Passo 2: Avvia Caddy

Esegui questo comando per ospitare il sito localmente sulla porta 8080:

caddy file-server --listen :8080

Passo 3: Visualizza la Tua Pagina

Apri il browser e vai su http://localhost:8080 per vedere il tuo modulo in azione. Ora puoi iniziare a raccogliere informazioni (magari qualche suggerimento su come migliorare la tua pizza preferita).

Riassunto:

In questa lezione hai imparato a:

  • Creare moduli HTML con il tag <form>.
  • Aggiungere campi di input per raccogliere informazioni dai visitatori.
  • Usare radio button e checkbox per offrire opzioni multiple.
  • Ospitare la tua pagina con Caddy per testare i tuoi moduli.

Adesso la tua pagina è interattiva, pronta a raccogliere tutte le informazioni necessarie (come se i tuoi visitatori amano o odiano la pizza con l’ananas!). Nella prossima lezione parleremo di come stilizzare la tua pagina con CSS. Rimani sintonizzato per altre avventure nel design web!

HTML  Principianti  Web Design 

Vedi anche