HTML for Kids · Lezione

Moduli: raccogliere dati dagli utenti

Crei semplici moduli con caselle di testo, pulsanti e altro

Moduli: raccogliere dati dagli utenti è una lezione HTML for Kids gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML for Kids, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML for Kids include 4 lezioni in totale.

Moduli: raccogliere dati dagli utenti

Benvenuto nella lezione successiva! Oggi impareremo a creare moduli in HTML. I moduli consentono agli utenti di inserire dati, come il proprio nome o indirizzo email, nella pagina web.

Cosa sono i moduli?

I moduli servono a raccogliere informazioni dagli utenti. Ad esempio, quando crea un account, compila un modulo con campi come il nome e l'indirizzo email.

I moduli in HTML vengono creati usando il tag <form>.

Creare un modulo di base

Un modulo viene creato usando il tag <form>. All'interno di questo tag si aggiungono campi di input, pulsanti e altro.

Esempio:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <button type="submit">Submit</button>
</form>

Tipi di input dei moduli

I moduli HTML supportano diversi tipi di campi di input. Ecco alcuni dei più comuni:

text: per inserire testo breve
email: per gli indirizzi email
password: per le password
number: per i numeri

Esempio:

<form>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
  <br />
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" />
</form>

Aggiungere pulsanti di opzione e caselle di controllo

È possibile usare i pulsanti di opzione per le scelte singole e le caselle di controllo per le scelte multiple.

Esempio:

<form>
  <p>Favorite Color:</p>
  <input type="radio" id="red" name="color" value="red" />
  <label for="red">Red</label>
  <br />
  <input type="radio" id="blue" name="color" value="blue" />
  <label for="blue">Blue</label>
  <br />

  <p>Hobbies:</p>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Reading</label>
  <br />
  <input type="checkbox" id="sports" name="hobby" value="sports" />
  <label for="sports">Sports</label>
</form>

Aggiungere menu a discesa

È possibile usare il tag <select> per creare menu a discesa da cui gli utenti possono scegliere un'opzione.

Esempio:

<form>
  <label for="country">Select your country:</label>
  <select id="country" name="country">
    <option value="usa">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="canada">Canada</option>
  </select>
</form>

Pulsanti dei moduli

I pulsanti consentono agli utenti di inviare o reimpostare il modulo. In genere si usa il tag <button>.

Esempio:

<form>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Applicare uno stile al modulo

È possibile applicare uno stile al modulo usando CSS per renderlo più gradevole. Ad esempio, è possibile modificare le dimensioni dei campi o cambiarne i colori.

Esempio:

<style>
  form {
    width: 300px;
    margin: 20px auto;
  }
  input, select, button {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
  }
</style>

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <button type="submit">Submit</button>
</form>

Ottimo lavoro!

Congratulazioni! Ha imparato a creare moduli, a usare diversi tipi di input e ad applicare loro uno stile. I moduli sono essenziali per raccogliere i dati degli utenti e rendere interattive le pagine web. Nella prossima lezione esploreremo l'uso dei contenuti multimediali, come video e audio, per rendere le pagine più dinamiche. Si prepari a dare spazio alla creatività!

Moduli: raccogliere dati dagli utenti — illustrazione 10

Domande Frequenti

La lezione «Moduli: raccogliere dati dagli utenti» è gratuita?

Sì — il testo completo di «Moduli: raccogliere dati dagli utenti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML for Kids, passa a CoddyKit PRO. Il corso HTML for Kids include 4 lezioni in totale.

Cosa imparerò in «Moduli: raccogliere dati dagli utenti»?

Crei semplici moduli con caselle di testo, pulsanti e altro Eserciti HTML for Kids con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML for Kids?

Non è richiesta alcuna esperienza precedente. HTML for Kids su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Moduli: raccogliere dati dagli utenti»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML for Kids?

Sì. Ogni lezione HTML for Kids include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML for Kids