Template di moduli HTML

Un template di modulo HTML è un blocco di markup pronto all'uso e riutilizzabile che puoi copiare in un progetto e adattare. La maggior parte delle applicazioni web necessita sempre degli stessi pochi moduli — contatto, accesso, registrazione, feedback — quindi invece di costruire ognuno da zero, si parte da un template pulito e corretto, modificando solo etichette, campi e l'endpoint di invio.

Lavorare da un template offre vantaggi concreti:

• Consistenza — ogni modulo usa la stessa struttura, quindi lo stile e la validazione si comportano in modo prevedibile su tutto il sito.
• Velocità — si salta il codice standard e ci si concentra sui campi specifici del proprio modulo.
• Accessibilità di default — un buon template associa già ogni <label> al suo controllo, raggruppa i campi correlati in un <fieldset> e usa i tipi di <input> corretti, garantendo un'esperienza corretta agli utenti di screen reader e tastiera.
• Meno bug — gli errori comuni (un'etichetta che non punta a nulla, un attributo name mancante, il tipo di input sbagliato) sono già risolti.

Questo capitolo ti fornisce tre template puliti, validi e pronti da copiare — un modulo di contatto, un modulo di accesso e un modulo di registrazione — più un riferimento rapido agli attributi che li fanno funzionare.

Attributi principali dei moduli

Prima dei template, ecco gli attributi che troverai in ognuno di essi:

La regola più importante: ogni input ha bisogno di un'etichetta, e il for dell'etichetta deve essere uguale all'id dell'input. Questo è anche il motivo per cui <p for="..."> non è valido — solo <label> porta l'attributo for.

Template di modulo di contatto

Un modulo di contatto minimale: un nome, un'email, un messaggio e un pulsante di invio. Si noti il campo type="email", che offre la validazione del formato direttamente nel browser.

<form action="/contact" method="post">
  <fieldset>
    <legend>Contact us</legend>

    <p>
      <label for="contact-name">Name</label>
      <input type="text" id="contact-name" name="name" required>
    </p>

    <p>
      <label for="contact-email">Email</label>
      <input type="email" id="contact-email" name="email" required>
    </p>

    <p>
      <label for="contact-subject">Subject</label>
      <input type="text" id="contact-subject" name="subject">
    </p>

    <p>
      <label for="contact-message">Message</label>
      <textarea id="contact-message" name="message" rows="5" required></textarea>
    </p>

    <button type="submit">Send message</button>
  </fieldset>
</form>

Il <textarea> viene usato per l'input su più righe. A differenza di <input>, non ha un attributo value — il suo contenuto va tra il tag di apertura e quello di chiusura, e rows ne imposta l'altezza visibile.

Template di modulo di accesso

Un modulo di accesso è essenziale: un identificatore (email o nome utente), una password e una casella di spunta opzionale "ricordami". Il campo password usa type="password" per mascherare i caratteri.

<form action="/login" method="post">
  <fieldset>
    <legend>Sign in</legend>

    <p>
      <label for="login-email">Email</label>
      <input type="email" id="login-email" name="email" autocomplete="username" required>
    </p>

    <p>
      <label for="login-password">Password</label>
      <input type="password" id="login-password" name="password" autocomplete="current-password" required>
    </p>

    <p>
      <label>
        <input type="checkbox" name="remember" value="yes"> Remember me
      </label>
    </p>

    <button type="submit">Log in</button>
  </fieldset>
</form>

Per una singola casella di spunta, racchiudere il testo all'interno del <label> è un pattern comune e valido — l'etichetta viene quindi associata implicitamente al controllo che contiene, quindi non è necessaria una coppia for/id. I suggerimenti autocomplete permettono al browser e ai gestori di password di compilare correttamente le credenziali.

Template di modulo di registrazione

Un modulo di registrazione è più lungo e mostra altri due controlli: un menu a tendina <select> e un gruppo di pulsanti radio. I pulsanti radio che condividono lo stesso name formano un gruppo, quindi solo uno può essere selezionato alla volta.

<form action="/register" method="post">
  <fieldset>
    <legend>Create an account</legend>

    <p>
      <label for="reg-name">Full name</label>
      <input type="text" id="reg-name" name="fullname" required>
    </p>

    <p>
      <label for="reg-email">Email</label>
      <input type="email" id="reg-email" name="email" required>
    </p>

    <p>
      <label for="reg-password">Password</label>
      <input type="password" id="reg-password" name="password" autocomplete="new-password" minlength="8" required>
    </p>

    <p>
      <label for="reg-country">Country</label>
      <select id="reg-country" name="country" required>
        <option value="">Choose…</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="de">Germany</option>
        <option value="other">Other</option>
      </select>
    </p>

    <fieldset>
      <legend>Account type</legend>
      <p>
        <label>
          <input type="radio" name="account" value="personal" checked> Personal
        </label>
        <label>
          <input type="radio" name="account" value="business"> Business
        </label>
      </p>
    </fieldset>

    <p>
      <label>
        <input type="checkbox" name="terms" value="agreed" required> I agree to the terms
      </label>
    </p>

    <button type="submit">Register</button>
  </fieldset>
</form>

Alcune cose da notare:

• La prima <option value=""> è un segnaposto non selezionabile. Poiché il <select> è required, il browser blocca l'invio finché quell'opzione vuota è selezionata.
• minlength="8" sulla password impone una lunghezza minima senza nessun JavaScript.
• Il <fieldset> interno raggruppa i pulsanti radio, e il suo <legend> funge da etichetta per l'intero gruppo — importante per gli utenti di screen reader.

Capitoli correlati

Per approfondire ogni elemento utilizzato sopra:

• Il tag <form> — il contenitore e i suoi attributi action/method.
• Il tag <input> — ogni type di input e i relativi attributi.
• Il tag <label> — associare etichette ai controlli.
• Il tag <fieldset> — raggruppare campi correlati con un <legend>.
• Il tag <textarea> — input di testo su più righe.
• Il tag <select> — menu a tendina e opzioni.
• Il tag <button> — pulsanti di invio e reset.

Per una panoramica più ampia del funzionamento dei moduli, vedi Moduli HTML.

Esercizio