Creazione di moduli HTML

Benvenuto alla lezione successiva! In questa lezione imparerà a creare moduli utilizzando HTML. I moduli sono essenziali per raccogliere gli input dell'utente, che in seguito è possibile elaborare con PHP. Iniziamo!

Che cosa sono i moduli HTML?

I moduli HTML vengono utilizzati per raccogliere gli input dell'utente. Consentono agli utenti di compilare campi, effettuare selezioni e inviare dati a un server per l'elaborazione.

Esempio: un modulo di accesso in cui gli utenti inseriscono il proprio nome utente e la password.

Punto chiave: i moduli fungono da collegamento tra l'utente e gli script PHP.

Creazione di un modulo semplice

Ecco come creare un modulo HTML di base:

Spiegazione:

• action: specifica il file PHP che gestirà i dati del modulo.
• method: specifica come inviare i dati (GET o POST).
• required: garantisce che il campo venga compilato prima dell'invio.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

Elementi dei moduli

I moduli possono includere diversi tipi di input per raccogliere vari tipi di dati:

• text: per l'inserimento di testo su una singola riga.
• email: per gli indirizzi e-mail.
• password: per l'inserimento di password.
• checkbox: per le selezioni multiple.
• radio: per le selezioni singole.
• submit: per inviare il modulo.

Esempio:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

Utilizzo dei pulsanti di opzione

I pulsanti di opzione consentono agli utenti di selezionare un'opzione all'interno di un gruppo. Ecco un esempio:

Suggerimento: utilizzi lo stesso attributo name per tutti i pulsanti di opzione di un gruppo.

<form action="submit.php" method="POST">
  <p>Choose your 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>
  <button type="submit">Submit</button>
</form>

Utilizzo delle caselle di controllo

Le caselle di controllo consentono agli utenti di selezionare più opzioni. Ecco un esempio:

Suggerimento: utilizzi la sintassi degli array (hobbies[]) per raccogliere più valori.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

Menu a discesa

I menu a discesa consentono agli utenti di scegliere un'opzione da un elenco. Ecco un esempio:

Suggerimento: utilizzi selected per impostare un'opzione predefinita.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

Accessibilità dei moduli

Si assicuri che i moduli siano accessibili a tutti gli utenti:

• Utilizzi i tag label collegati agli input tramite gli attributi for.
• Raggruppi gli input correlati utilizzando fieldset e legend.
• Verifichi l'usabilità dei moduli sui dispositivi mobili.

Suggerimento: i moduli accessibili migliorano l'esperienza utente per tutti!

Ottimo lavoro!

Congratulazioni! Ha imparato a creare moduli HTML con vari tipi di input, inclusi campi di testo, pulsanti di opzione, caselle di controllo e menu a discesa. I moduli sono alla base dell'inserimento dei dati da parte dell'utente nello sviluppo web. Nella prossima lezione impareremo a elaborare i dati dei moduli utilizzando PHP. Continui a programmare!