I form sono uno degli strumenti più potenti e versatili che l'HTML5 ci mette a disposizione. Grazie a loro, è possibile raccogliere informazioni dagli utenti e inviarle a un server per essere elaborate. Che tu stia costruendo un sito di e-commerce, un modulo di contatto, o un sistema di registrazione, i form sono al centro di ogni interazione utente.

In questo articolo, ti guiderò attraverso le basi dei moduli HTML, mostrandoti come creare form semplici ma funzionali, utilizzando i principali elementi di input. Infine, esploreremo anche come aggiungere una validazione di base per assicurare che i dati inseriti dagli utenti siano corretti.

Struttura di Base di un Form: Il Tag <form>

Al centro di qualsiasi modulo HTML troviamo l'elemento fondamentale: il tag <form>. Questo tag ha la responsabilità di definire i limiti del modulo stesso e contiene al suo interno tutti gli elementi interattivi con cui l'utente può interagire per fornire dati. In sostanza, il tag <form> racchiude ogni campo di input, selezione, pulsante e textarea che desideriamo inserire nel modulo.

Quando parliamo di "form", ci riferiamo quindi a una struttura che consente agli utenti di interagire con un sito web, inserendo dati che possono essere raccolti e inviati al server per essere elaborati. Pensiamo ai moduli di iscrizione a una newsletter, ai form di login o ai campi per inserire informazioni di pagamento: tutti questi elementi utilizzano il tag <form> per organizzare e inviare i dati.

Sintassi di Base

La sintassi di un modulo è abbastanza semplice e segue una struttura chiara:

<form action="/submit" method="post">
  <!-- campi del form qui -->
</form>

Questa è una struttura di base che puoi utilizzare come punto di partenza per creare qualsiasi tipo di modulo. Vediamo ora nel dettaglio i principali attributi del tag <form>.

• action: Questo attributo indica la destinazione finale dei dati del modulo. È qui che specifichiamo l'URL a cui verranno inviati i dati una volta che l'utente avrà completato l'inserimento e premuto il pulsante di invio. Ad esempio, se il modulo serve per registrare un nuovo utente, l'attributo action potrebbe puntare a una pagina o a uno script che si occupa di gestire la registrazione.

  Se non specifichiamo un valore per l'attributo action, il modulo invierà i dati alla stessa pagina in cui si trova. Tuttavia, è buona pratica sempre specificare chiaramente dove devono essere inviati i dati per una gestione corretta.

• method: Questo attributo definisce il metodo HTTP da utilizzare per inviare i dati del modulo. I due metodi più comuni sono:

  • GET: Utilizzato soprattutto per richieste che non comportano la modifica dei dati sul server. Con GET, i dati del modulo vengono inseriti direttamente nell'URL sotto forma di stringa di query (parametri). Questo metodo è adatto per operazioni in cui i dati non sono sensibili, come la ricerca in un sito.
  • POST: Il metodo POST invia i dati nel corpo della richiesta HTTP, il che rende questa modalità più sicura per l'invio di dati sensibili (come password o informazioni personali). Inoltre, il metodo POST è preferibile quando si inviano grandi quantità di dati o file.

Esempio Pratico

Vediamo ora un esempio concreto per chiarire come costruire un modulo semplice che raccoglie il nome e l'email di un utente:

<form action="/invia-dati" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Invia</button>
</form>

In questo esempio, abbiamo creato un modulo che invia i dati a una pagina o a uno script all'indirizzo /invia-dati. Il metodo utilizzato è POST, quindi i dati verranno inviati in modo sicuro nel corpo della richiesta HTTP.

• Campo Nome:

  • Usiamo l'elemento <label> per definire un'etichetta associata al campo di input per il nome. L'attributo for è collegato all'id dell'input, in modo da rendere il modulo più accessibile: l'utente può cliccare sull'etichetta "Nome" per attivare il campo.
  • Il campo di input ha type="text", che indica un campo di testo semplice. L'attributo name è essenziale perché definisce il nome del campo, che sarà utilizzato dal server per identificare il dato inviato.
  • Inoltre, l'attributo required specifica che il campo deve essere obbligatoriamente compilato dall'utente prima di poter inviare il modulo. Se questo campo viene lasciato vuoto, il browser impedirà l'invio del modulo e mostrerà un messaggio di errore.

• Campo Email:

  • Analogamente al campo del nome, il campo email utilizza un <label> per l'accessibilità e un input, ma con type="email". Questo tipo di input è specifico per gli indirizzi email e include una validazione nativa del formato dell'email. Ad esempio, se l'utente inserisce un testo che non è nel formato corretto (come "example.com" invece di "example@example.com"), il browser segnalerà l'errore prima ancora che il modulo venga inviato.
  • Anche qui, l'attributo required garantisce che il campo non possa essere lasciato vuoto.

• Pulsante di Invio:

  • Infine, abbiamo un pulsante con type="submit", che quando cliccato invia il modulo. Il testo "Invia" è il testo che appare nel pulsante e può essere personalizzato in base al contesto del modulo.

Validazione di Base del Modulo

Questo modulo utilizza già alcune forme di validazione nativa HTML5, senza bisogno di aggiungere JavaScript. Ad esempio:

• L'attributo required forza l'utente a compilare i campi prima di poter inviare il modulo.
• Il tipo email valida automaticamente che l'input inserito sia nel formato corretto.

Questa validazione avviene interamente lato client, cioè nel browser dell'utente, offrendo un'esperienza fluida e immediata. Tuttavia, è importante ricordare che la validazione lato client può essere bypassata, come vedremo in dettaglio più avanti, quindi è sempre consigliabile implementare anche una validazione lato server per garantire la sicurezza dei dati.

Campi di Input di Base

Tag <input>

Il tag <input> è probabilmente l'elemento più utilizzato nei form HTML. Con un solo tag, possiamo creare una grande varietà di campi di input, semplicemente cambiando il valore dell'attributo type.

Input text (Campo di Testo)

Il tipo più comune di input è il campo di testo, che permette all'utente di inserire una stringa di testo libera. Questo tipo si crea con type="text".

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Qui, l'attributo name è fondamentale: definisce il nome del campo, che verrà inviato al server insieme ai dati inseriti dall'utente.

Input Email

HTML5 ci offre nuovi tipi di input, come l'email. L'input di tipo email permette all'utente di inserire un indirizzo email, e il browser eseguirà una validazione di base (ad esempio, controlla che ci sia un '@' e un dominio).

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Input Password

Se vogliamo che l'utente inserisca una password, possiamo usare type="password". Questo nasconde i caratteri inseriti per maggiore privacy.

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

Tag <textarea>

Se hai bisogno di un campo di testo più ampio, ad esempio per raccogliere commenti o descrizioni, puoi utilizzare il tag <textarea>. Questo elemento permette all'utente di scrivere su più righe, rendendolo ideale per testi più lunghi.

<label for="messaggio">Messaggio:</label>
<textarea id="messaggio" name="messaggio"></textarea>

Puoi anche controllare le dimensioni dell'area di testo con gli attributi rows e cols:

<textarea id="messaggio" name="messaggio" rows="5" cols="30"></textarea>

Tag <select>

Un altro elemento comune nei form è il menu a tendina, creato con il tag <select>. Questo ti permette di offrire una serie di opzioni predefinite tra cui l'utente può scegliere.

<label for="paese">Paese:</label>
<select id="paese" name="paese">
  <option value="italia">Italia</option>
  <option value="francia">Francia</option>
  <option value="spagna">Spagna</option>
</select>

Ogni opzione viene definita con il tag <option>, e l'attributo value contiene il valore che verrà inviato al server se l'opzione viene selezionata.

Tag <button>

Per inviare i dati del form, utilizziamo l'elemento <button>. Anche se l'input di tipo submit è ampiamente utilizzato, il tag <button> offre maggiore flessibilità perché ti permette di inserire elementi HTML (come immagini o icone) all'interno del pulsante.

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

Validazione di Base degli Input

Ora che abbiamo visto come creare diversi campi di input, vediamo come assicurarci che i dati inseriti dall'utente siano validi. HTML5 ci offre diversi strumenti per eseguire una validazione di base direttamente nel browser, senza dover ricorrere a JavaScript.

L'attributo required

Uno degli strumenti più semplici è l'attributo required, che impedisce all'utente di inviare il modulo se il campo non è compilato.

<input type="text" id="nome" name="nome" required>

Se l'utente tenta di inviare il modulo senza inserire un nome, il browser mostrerà un messaggio di errore e bloccherà l'invio.

Controllo del Formato

Alcuni tipi di input, come email, includono già una validazione integrata. Il browser controlla che il valore inserito dall'utente rispetti il formato corretto. Tuttavia, possiamo aggiungere ulteriori controlli con l'attributo pattern, che utilizza espressioni regolari per definire un formato specifico.

<input type="text" id="username" name="username" pattern="[A-Za-z0-9]{5,10}" title="Inserisci un username di 5-10 caratteri, lettere e numeri">

In questo esempio, l'utente deve inserire un username che contenga solo lettere e numeri, e che sia lungo tra 5 e 10 caratteri.

Attributi min, max, e maxlength

Altri attributi utili per la validazione includono min e max (per gli input numerici), e maxlength (per limitare il numero di caratteri in un campo di testo).

<input type="number" id="età" name="età" min="18" max="99">

In questo caso, l'utente deve inserire un'età compresa tra 18 e 99 anni.

Conclusione

Con queste basi, hai tutto ciò che ti serve per creare form HTML5 semplici e funzionali. Abbiamo esplorato il tag <form>, i principali campi di input, e come aggiungere una validazione di base per assicurare che i dati inseriti dagli utenti siano corretti.

Nei prossimi articoli, ci immergeremo in caratteristiche più avanzate come i nuovi tipi di input introdotti con HTML5 e la personalizzazione della validazione.

Altri articoli

PyScript: Python nel browser

Da HTML a CSV: Come Estrarre Dati con JavaScript

Come utilizzare le liste di definizioni in HTML5 per creare glossari FAQ e contenuti strutturati

Come le Property Hooks Trasformano il Tuo Codice in PHP 8.4