Guida HTML interattiva: Form

Q: Come si crea un form in HTML?

Racchiudi i campi in , dai a ogni campo un name e un , e chiudi con . Quando il form viene inviato, il browser manda ogni coppia name=value all'URL di action.

Q: Che differenza c'è tra GET e POST in un form?

method="get" (il predefinito) mette i campi nell'URL, come in /search?q=shoes, ed è adatto a ricerche e filtri che si possono salvare nei preferiti. method="post" li invia nel corpo della richiesta, ed è quello che vuoi per accessi, registrazioni e tutto ciò che modifica dei dati.

Q: Perché un campo del mio form non viene inviato?

Non ha un attributo name, oppure è disabled. Vengono inviati solo i campi con un nome e attivi. Anche una checkbox o un radio button non selezionati restano completamente fuori.

Q: A cosa servono fieldset e legend?

raggruppa campi correlati e è la didascalia del gruppo. I lettori di schermo annunciano la legend quando il focus entra nel gruppo, ed è questo che rende comprensibile un gruppo di radio button, e disabled su un fieldset disattiva tutti i campi al suo interno.

Q: Come valido un form in HTML senza JavaScript?

Usa gli attributi: required, type="email", minlength, maxlength, min, max e pattern. Il browser blocca l'invio e mostra un messaggio per il primo campo non valido. Valida sempre anche sul server, perché questi controlli girano nel browser di chi usa la pagina e si possono aggirare.

Q: Come evito che un form ricarichi la pagina?

Ascolta l'evento submit del form e chiama event.preventDefault(), poi invia tu i dati con fetch: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

Come creare un form in HTML

Un form è un elemento <form> che contiene dei campi e un pulsante di invio. Ogni campo ha bisogno di un name: è la chiave con cui viene inviato il valore. Compila il form e premi Send. L'anteprima non invia niente da nessuna parte; mostra esattamente cosa avrebbe inviato il browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact form</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input, textarea { display: block; font: inherit; margin-top: 4px; }
  </style>
</head>
<body>
  <form action="/contact" method="post">
    <label>Name <input name="name" autocomplete="name" required></label>
    <label>Email <input type="email" name="email" autocomplete="email" required></label>
    <label>Message <textarea name="message" rows="3"></textarea></label>
    <button type="submit">Send</button>
  </form>
</body>
</html>

I pezzi:

action è l'URL a cui vanno i dati, e method è il modo (qui post).
name su ogni campo. Il suo valore è quello che ha scritto l'utente.
<label> dà un nome a ogni campo sullo schermo e per i lettori di schermo (vedi label in HTML).
required e type="email" fanno controllare i campi al browser prima dell'invio. Prova a inviare con il nome vuoto, o con abc come email.
Il pulsante di invio invia il form. Lo fa anche premere Invio in un campo di testo.

action e method: dove e come vanno i dati

Attributo	Valori	Predefinito
`action`	Qualsiasi URL	L'URL della pagina attuale
`method`	`get`, `post`, `dialog`	`get`
`enctype`	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`	`application/x-www-form-urlencoded`

Con method="get", i campi diventano la query string dell'URL: un form di ricerca con name="q" va a /search?q=blue+shoes. È la scelta giusta per ricerche e filtri, perché il risultato si può salvare nei preferiti e condividere. Con method="post", i campi vanno nel corpo della richiesta e non compaiono nella barra degli indirizzi né nella cronologia. Usa POST per tutto ciò che fa accedere, crea, modifica o elimina qualcosa, e per le password.

Un form con un caricamento di file (<input type="file">) ha bisogno di method="post" e enctype="multipart/form-data", altrimenti viene inviato solo il nome del file. method="dialog" è per un form dentro un <dialog>: l'invio chiude la finestra di dialogo invece di mandare una richiesta.

Cosa viene inviato

Vengono inviati solo i campi con un name, e solo quando non sono disabled. Premi Submit e confronta i campi con quello che invia il form:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What is sent</title>
  <style>
    label { display: block; margin-bottom: 6px; }
  </style>
</head>
<body>
  <form>
    <label>With a name <input name="city" value="Lisbon"></label>
    <label>No name <input value="not sent"></label>
    <label>Disabled <input name="country" value="Portugal" disabled></label>
    <label>Read only <input name="zip" value="1100" readonly></label>
    <label><input type="checkbox" name="newsletter" value="yes"> Unchecked box</label>
    <input type="hidden" name="source" value="footer">
    <button type="submit" name="action" value="save">Submit</button>
  </form>
</body>
</html>

Il form invia city, zip, source e action. Il campo senza nome, quello disattivato e la checkbox non selezionata restano fuori. Gli input nascosti vengono inviati ma non si vedono mai, e il pulsante di invio manda il suo name e il suo value perché è il pulsante usato.

Raggruppare i campi con fieldset e legend

<fieldset> disegna un riquadro intorno a campi correlati, e <legend> è la sua didascalia. I lettori di schermo annunciano la legend quando il focus entra nel gruppo, ed è questo che rende comprensibile un insieme di radio button come quelli qui sotto: "Delivery, Standard, pulsante di opzione".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fieldset</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; margin-bottom: 12px; }
    legend { font-weight: 600; padding: 0 6px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Delivery</legend>
      <label><input type="radio" name="delivery" value="standard" checked> Standard</label>
      <label><input type="radio" name="delivery" value="express"> Express</label>
    </fieldset>

    <fieldset disabled>
      <legend>Gift options (unavailable)</legend>
      <label><input type="checkbox" name="wrap" value="yes"> Gift wrap</label>
      <label>Note <input name="note"></label>
    </fieldset>

    <button type="submit">Order</button>
  </form>
</body>
</html>

disabled su un fieldset disattiva in un colpo tutti i campi al suo interno, e nessuno viene inviato. Toglilo e i campi per il regalo diventano utilizzabili.

Validazione integrata: required, pattern e compagnia

I browser controllano questi attributi prima dell'invio e mostrano un messaggio sul primo campo che non va:

Attributo	Controlla
`required`	Il campo non è vuoto (una checkbox è selezionata)
`type="email"`, `type="url"`	Il valore ha l'aspetto di un indirizzo email o di un URL
`minlength`, `maxlength`	Lunghezza del testo
`min`, `max`, `step`	Intervallo di numeri e date
`pattern`	L'intero valore corrisponde a un'espressione regolare

:invalid e :valid danno stile ai campi in base al loro stato. :user-invalid di solito è meglio: si applica solo dopo che l'utente ha modificato il campo ed è passato oltre, o ha provato a inviare, così un form vuoto non si apre tutto rosso.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Validation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; border: 2px solid #9ca3af; border-radius: 6px; padding: 4px 8px; }
    input:user-invalid { border-color: #dc2626; }
    input:user-valid { border-color: #16a34a; }
    small { color: #4b5563; }
  </style>
</head>
<body>
  <form>
    <label>Username
      <input name="username" required minlength="3" maxlength="16" pattern="[a-z0-9_]+">
      <small>3 to 16 characters: lowercase letters, digits, underscore</small>
    </label>
    <label>Age
      <input type="number" name="age" min="13" max="120" required>
    </label>
    <label>Postcode
      <input name="postcode" pattern="[0-9]{5}" title="Five digits" required>
    </label>
    <button type="submit">Sign up</button>
  </form>
</body>
</html>

Tre cose di pattern confondono spesso. Deve corrispondere all'intero valore (non servono ^ o $). Viene controllato solo quando il campo non è vuoto, quindi abbinalo a required. E il messaggio di errore del browser è generico, quindi descrivi il formato in un testo visibile accanto al campo. Chrome e Firefox aggiungono il testo di title al loro messaggio, ma è facile non notarlo.

Per disattivare i controlli, per esempio mentre provi la validazione del tuo server, aggiungi novalidate al <form>. Un singolo pulsante di invio può saltarli con formnovalidate.

La validazione del browser è una comodità per chi compila. Chiunque può modificare la pagina o inviare una richiesta senza passarci, quindi il server deve ricontrollare ogni valore.

Messaggi personalizzati con setCustomValidity

Quando una regola non si può scrivere come attributo, come "le due password devono coincidere", imposta il messaggio da JavaScript. Un campo con un messaggio personalizzato non vuoto non è valido; una stringa vuota lo rende di nuovo valido:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom validity</title>
  <style>
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Password <input type="password" name="password" id="pw" minlength="8" required></label>
    <label>Repeat <input type="password" id="pw2" required></label>
    <button type="submit">Create account</button>
  </form>

  <script>
    const pw = document.querySelector('#pw');
    const pw2 = document.querySelector('#pw2');
    const check = () => {
      pw2.setCustomValidity(pw.value === pw2.value ? '' : 'The passwords do not match.');
    };
    pw.addEventListener('input', check);
    pw2.addEventListener('input', check);
  </script>
</body>
</html>

Il campo di ripetizione non ha name, quindi viene inviata una sola copia della password.

Gestire l'invio in JavaScript

Per inviare il form senza uscire dalla pagina, ascolta submit, chiama preventDefault() e leggi i campi con FormData. Ascoltare submit invece del click di un pulsante intercetta ogni modo di inviare, compreso Invio, e scatta solo dopo che la validazione integrata è passata:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit with JavaScript</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; }
  </style>
</head>
<body>
  <form id="signup">
    <input name="email" type="email" placeholder="Email" required>
    <select name="plan">
      <option value="free">Free</option>
      <option value="pro">Pro</option>
    </select>
    <button type="submit">Join</button>
  </form>
  <pre id="out"></pre>

  <script>
    const form = document.querySelector('#signup');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = Object.fromEntries(new FormData(form));
      document.querySelector('#out').textContent = JSON.stringify(data, null, 2);
      // A real page would send it: fetch('/api/signup', { method: 'POST', body: new FormData(form) })
    });
  </script>
</body>
</html>

Object.fromEntries(new FormData(form)) trasforma i campi in un semplice oggetto. Per i campi che possono avere più valori (checkbox con lo stesso nome, una select multipla) usa invece formData.getAll('name'), perché l'oggetto tiene solo l'ultimo valore.

Errori comuni

Campi senza name. Restano fuori dai dati inviati senza avvisare.
Placeholder al posto delle etichette. Il suggerimento sparisce appena si inizia a scrivere. Usa un <label>.
Un <button> senza type usato per qualcosa di diverso dall'invio. Dentro un form è un pulsante di invio.
Un form dentro un form. Annidare i form non è valido; il browser ignora il tag <form> interno.
Ascoltare click sul pulsante di invio invece di submit sul form. Gli invii con il tasto Invio sfuggono.
Fidarsi della validazione del browser lato server. Valida di nuovo lì.
GET per le password. Finiscono nell'URL, nella cronologia e nei log del server.

Domande frequenti

Come si crea un form in HTML?

Racchiudi i campi in <form action="/signup" method="post">, dai a ogni campo un name e un <label>, e chiudi con <button type="submit">. Quando il form viene inviato, il browser manda ogni coppia name=value all'URL di action.

Che differenza c'è tra GET e POST in un form?

method="get" (il predefinito) mette i campi nell'URL, come in /search?q=shoes, ed è adatto a ricerche e filtri che si possono salvare nei preferiti. method="post" li invia nel corpo della richiesta, ed è quello che vuoi per accessi, registrazioni e tutto ciò che modifica dei dati.

Perché un campo del mio form non viene inviato?

Non ha un attributo name, oppure è disabled. Vengono inviati solo i campi con un nome e attivi. Anche una checkbox o un radio button non selezionati restano completamente fuori.

A cosa servono fieldset e legend?

<fieldset> raggruppa campi correlati e <legend> è la didascalia del gruppo. I lettori di schermo annunciano la legend quando il focus entra nel gruppo, ed è questo che rende comprensibile un gruppo di radio button, e disabled su un fieldset disattiva tutti i campi al suo interno.

Come valido un form in HTML senza JavaScript?

Usa gli attributi: required, type="email", minlength, maxlength, min, max e pattern. Il browser blocca l'invio e mostra un messaggio per il primo campo non valido. Valida sempre anche sul server, perché questi controlli girano nel browser di chi usa la pagina e si possono aggirare.

Come evito che un form ricarichi la pagina?

Ascolta l'evento submit del form e chiama event.preventDefault(), poi invia tu i dati con fetch: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

Concetti correlati