Come creerai un modulo HTML?

Per creare un modulo HTML, utilizzerò l’elemento <form>. Al suo interno saranno collocati elementi di controllo come campi di testo (<input type="text">), campi password (<input type="password">), caselle di controllo (<input type="checkbox">), pulsanti radio (<input type="radio">), liste a discesa (<select> e <option>), aree di testo (<textarea>) e pulsanti di invio (<button type="submit"> o <input type="submit">).

Ogni elemento del modulo avrà un attributo name per identificarlo sul lato server e, di norma, un attributo id per associarlo a un’etichetta (<label>).

Attributi di <form>:

• action: URL a cui verranno inviati i dati del modulo al momento dell’invio.
• method: Metodo HTTP per l’invio dei dati (GET o POST).
• enctype: Tipo di codifica dei dati durante l’invio (ad esempio, multipart/form-data per il caricamento di file).

Esempio di un modulo semplice:

<form action="/submit-form" method="post">
  <label for="username">Nome utente:</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Ricordami</label><br><br>

  <label for="country">Paese:</label><br>
  <select id="country" name="country">
    <option value="ru">Russia</option>
    <option value="us">USA</option>
  </select><br><br>

  <label for="message">Messaggio:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <button type="submit">Invia</button>
</form>

La validazione del modulo può essere implementata sia lato client (usando attributi di validazione HTML5, JavaScript) sia lato server.

Attributi di validazione HTML5:

• required: Campo obbligatorio.
• minlength, maxlength: Lunghezza minima e massima del campo di testo.
• min, max: Valori minimo e massimo per i campi numerici.
• type con vari valori (email, url, number, date, ecc.) per validazione automatica del browser.
• pattern: Espressione regolare per validare l’input.

Esempio con validazione HTML5:

<form action="/submit-form" method="post">
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Età (da 18 a 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">CAP (5 cifre):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">Invia</button>
</form>

Per la stilizzazione del modulo si utilizzerà CSS. Per logiche più complesse o invio asincrono dei dati, si utilizzerà JavaScript. Per migliorare l’accessibilità del modulo, saranno utilizzati attributi ARIA appropriati e una corretta struttura HTML.