Moduli HTML
Impara i moduli HTML: l'elemento form, action e method (GET vs POST), label, input, textarea, select, button e validazione HTML5.
Un modulo HTML raccoglie l'input dell'utente e lo invia a un server per l'elaborazione. Un modulo è un contenitore — l'elemento <form> — che contiene uno o più controlli come campi di testo, caselle di spunta, pulsanti radio, elenchi a discesa e pulsanti di invio. Questa pagina tratta l'elemento <form> stesso, i controlli che vi si inseriscono, come vengono inviati i dati (GET vs POST) e come etichettare e validare l'input.
L'elemento <form>
Ogni modulo inizia con il tag <form>. I controlli che l'utente compila si trovano tra i tag di apertura <form> e di chiusura </form>. Due attributi svolgono la maggior parte del lavoro:
action— l'URL che riceve i dati del modulo quando l'utente lo invia.method— il metodo HTTP usato per inviare i dati,GEToPOST.
<form action="/subscribe" method="POST">
<!-- form controls go here -->
<button type="submit">Subscribe</button>
</form>Se si omette action, il modulo viene inviato all'URL della pagina corrente. Se si omette method, il browser usa GET per impostazione predefinita.
Etichettare i controlli
Ogni input dovrebbe avere un elemento <label>. Collega la label al suo controllo assegnando al controllo un id e puntando l'attributo for della label a quello stesso id:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Text Input Example</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="surname">Surname:</label>
<input type="text" id="surname" name="surname" />
</form>
</body>
</html>Usa un vero elemento <label> invece di testo semplice come Name:<br />. Una label collegata viene letta ad alta voce dagli screen reader e amplia l'area cliccabile, così toccando la label si mette a fuoco il campo. Scopri di più nel capitolo HTML tag <label>.
L'elemento HTML <input>
L'elemento <input> è il controllo di modulo più comune. Il suo attributo type cambia aspetto e comportamento — text, email, password, number, checkbox, radio, file, submit e molti altri.
Esaminiamo alcuni tipi di input.
Input di testo
<input type="text"> crea un campo di testo a riga singola. L'attributo name è la chiave inviata al server insieme al valore del campo.
Esempio di input di testo:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
</form>Input pulsante radio
<input type="radio"> consente all'utente di selezionare esattamente un'opzione da un insieme. I pulsanti radio condividono lo stesso name, quindi selezionandone uno si deselezionano gli altri nel gruppo.
Esempio di input pulsante radio:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Radio Button Example</h2>
<form>
<input type="radio" id="football" name="game" value="football" checked />
<label for="football">Football</label>
<input type="radio" id="basketball" name="game" value="basketball" />
<label for="basketball">Basketball</label>
</form>
</body>
</html>Input di invio
<input type="submit"> (o un <button type="submit">) invia i dati del modulo al gestore del modulo — l'URL del server specificato nell'attributo action del modulo.
Esempio di input di invio:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>HTML Form Example</h2>
<form action="/form/submit" method="POST">
<label for="firstname">Name:</label>
<input type="text" id="firstname" name="firstname" value="Tom" />
<label for="lastname">Surname:</label>
<input type="text" id="lastname" name="lastname" value="Brown" />
<label for="age">Age:</label>
<input type="number" id="age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
<p>Click the Submit button to send the form data to the action page.</p>
</body>
</html>Altri controlli del modulo
Gli input non sono gli unici controlli. Questi elementi offrono testo su più righe, elenchi a discesa, pulsanti personalizzati e un modo per raggruppare i campi correlati.
Testo su più righe con <textarea>
Usa <textarea> per testi più lunghi come commenti o messaggi. A differenza di <input>, ha tag di apertura e chiusura separati, e rows/cols ne definiscono la dimensione visibile.
<form>
<label for="message">Your message:</label>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
</form>Elenchi a discesa con <select>
Un elemento <select> crea un elenco a discesa. Ogni scelta è un <option>; il value è ciò che viene inviato, e selected imposta il valore predefinito.
<form>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk" selected>United Kingdom</option>
<option value="ca">Canada</option>
</select>
</form>L'elemento <button>
L'elemento <button> è più flessibile di <input type="submit"> perché può contenere HTML (testo, icone). Imposta sempre il suo type: submit invia il modulo, reset lo azzera, e button non fa nulla da solo (usalo con JavaScript).
<form>
<button type="submit">Send</button>
<button type="reset">Clear</button>
</form>Raggruppare con <fieldset> e <legend>
Raggruppa i controlli correlati in un elemento <fieldset> e descrivi il gruppo con un <legend>. Questo disegna un bordo con etichetta e aiuta gli utenti di screen reader a capire come i campi sono correlati — utile per blocchi di indirizzo o insiemi di pulsanti radio.
<form>
<fieldset>
<legend>Contact details</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" />
</fieldset>
</form>L'attributo action
L'attributo action specifica l'URL dove vengono inviati i dati del modulo quando questo viene sottomesso. Quando l'utente clicca il pulsante di invio, il browser raccoglie i valori dei controlli e li invia a quell'URL.
<form action="/form/submit">L'attributo target
L'attributo target definisce dove si apre il risultato del modulo — in una nuova scheda del browser, in un frame o nella finestra corrente.
_self(predefinito) apre il risultato nella finestra corrente._blankapre il risultato in una nuova scheda del browser.
<form action="/form/submit" target="_blank">L'attributo method
L'attributo method definisce il metodo HTTP — GET o POST — usato per inviare i dati del modulo. La scelta influisce su dove vanno i dati e su cosa significa la richiesta.
Esempio del metodo GET:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the GET Method</h2>
<form action="/form/submit" method="GET">
<label for="g-name">Name:</label>
<input type="text" id="g-name" name="name" value="Tom" />
<label for="g-surname">Surname:</label>
<input type="text" id="g-surname" name="surname" value="Brown" />
<label for="g-age">Age:</label>
<input type="number" id="g-age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Dopo l'invio, i dati appaiono nella query string dell'URL, come /form/submit?name=Tom&surname=Brown&age=21.
Esempio del metodo POST:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the Post Method</h2>
<form action="/form/submit" method="POST">
<label for="p-name">Name:</label>
<input type="text" id="p-name" name="name" value="Tom" />
<label for="p-surname">Surname:</label>
<input type="text" id="p-surname" name="surname" value="Brown" />
<label for="p-age">Age:</label>
<input type="number" id="p-age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Con POST, i dati viaggiano nel corpo della richiesta, quindi non compaiono nell'URL.
GET vs POST
I due metodi inviano i dati in modo diverso e segnalano intenzioni diverse al server.
GET aggiunge i dati del modulo all'URL come query string:
- I dati sono visibili nella barra degli indirizzi e possono essere salvati tra i segnalibri o condivisi.
- Gli URL hanno un limite di lunghezza (comunemente circa 2048 caratteri), quindi GET non è adatto a grandi quantità di dati.
- GET è idempotente — ripetere la stessa richiesta non dovrebbe modificare nulla sul server. Usalo per ricerche e filtri che leggono solo i dati.
Non usare GET per inviare password o altri dati sensibili — finiscono visibili nell'URL, nella cronologia del browser e nei log del server.
POST invia i dati nel corpo della richiesta:
- I dati non vengono mostrati nell'URL e non c'è un limite pratico di dimensioni, quindi POST gestisce payload di grandi dimensioni e upload di file.
- Le invii con POST non possono essere salvate tra i segnalibri.
- POST è pensato per le richieste che modificano lo stato del server (creare un account, pubblicare un commento, effettuare un ordine).
Regola pratica: usa GET per leggere o cercare qualcosa, e POST per creare o modificare qualcosa.
Validare l'input dell'utente
HTML5 può verificare l'input nel browser prima che il modulo venga inviato — senza bisogno di JavaScript. Aggiungi questi attributi ai tuoi controlli:
| Attributo | Cosa fa |
|---|---|
required | Il campo deve essere compilato prima che il modulo possa essere inviato. |
minlength / maxlength | Numero minimo / massimo di caratteri per i campi di testo. |
min / max | Valore minimo / massimo consentito per numeri, intervalli e date. |
pattern | Un'espressione regolare a cui il valore deve corrispondere. |
type | Alcuni tipi validano il formato automaticamente: email, url, number, tel. |
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Form Validation Example</h2>
<form action="/form/submit" method="POST">
<label for="user">Username (3–12 letters):</label>
<input type="text" id="user" name="user"
required minlength="3" maxlength="12" pattern="[A-Za-z]+" />
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail" required />
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Se un valore non soddisfa una regola, il browser blocca l'invio e mostra un messaggio. Per disattivare questo controllo integrato, aggiungi l'attributo novalidate al <form>.
L'attributo enctype
L'attributo enctype imposta come vengono codificati i dati del modulo quando inviati con POST:
application/x-www-form-urlencoded— il predefinito; i nomi e i valori dei campi vengono codificati nell'URL. Adatto per i moduli di testo ordinari.multipart/form-data— richiesto quando il modulo contiene un upload di file (<input type="file">), affinché i dati binari del file vengano inviati correttamente.
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="photo">Profile photo:</label>
<input type="file" id="photo" name="photo" />
<button type="submit">Upload</button>
</form>Altri attributi
Di seguito sono elencati altri attributi utili di <form>:
| Attributo | Descrizione |
|---|---|
accept-charset | Il set di caratteri usato nel modulo inviato (predefinito: il charset della pagina). |
autocomplete | Se il browser può compilare automaticamente il modulo (predefinito: on). |
enctype | Come vengono codificati i dati inviati (predefinito: application/x-www-form-urlencoded). |
name | Un nome usato per identificare il modulo. |
novalidate | Indica al browser di non validare il modulo all'invio. |
Capitoli correlati
- HTML tag
<form> - HTML tag
<input> - HTML tag
<label> - HTML tag
<textarea> - HTML tag
<select> - HTML tag
<button> - HTML tag
<fieldset>