Form HTML

Onnipresenti e indispensabili

I moduli (form) HTML sono il meccanismo principale per raccogliere input dagli utenti. Sono ovunque nell'esperienza web quotidiana: login, registrazione, ricerca, e-commerce, sondaggi, commenti.

Trasformano la navigazione da passiva (leggere contenuti) ad attiva (interagire, inviare informazioni).

L'elemento cardine per la creazione di un modulo è il tag <form>. Questo elemento agisce da contenitore per tutti i controlli — campi di testo, pulsanti, checkbox, ecc. — che costituiscono un modulo specifico.

Cosa imparerete:

• Come creare la struttura di un form e inviare dati a un server
• Tutti i tipi di controlli: testo, selezione, checkbox, date, file...
• Come raggruppare e validare i dati
• I principi di accessibilità nei form

L'Anatomia di un Form

Un form HTML è composto da diversi "pezzi" che lavorano insieme. Ecco una mappa mentale per orientarvi:

Il Contenitore <form>

Il tag <form> è il contenitore per tutti i controlli di un modulo. Due attributi fondamentali:

• action: l'URL di destinazione dei dati (dove inviarli). Se omesso, invia alla stessa pagina (sconsigliato).
• method: come inviare i dati. Due valori:
  • GET (default): dati visibili nell'URL. Come una cartolina: tutti possono leggere. Va bene per ricerche e filtri.
  • POST: dati nel corpo della richiesta, non visibili nell'URL. Come una busta chiusa. Obbligatorio per dati sensibili.

<form action="/registrazione" method="POST">
  <!-- Qui andranno i controlli -->
</form>

Regola: è severamente vietato annidare un <form> dentro un altro <form>.

Etichette e Primi Controlli

Il controllo più comune è <input type="text">: un campo per testo a riga singola. È un tag "vuoto" (non ha tag di chiusura).

Ma un input da solo non basta: l'utente non sa cosa scriverci! Serve un'etichetta: il tag <label>.

Collegare label e input con for/id:

1. Si dà un id univoco all'input: <input id="nome_utente">
2. Si assegna for alla label con lo stesso valore: <label for="nome_utente">

Benefici:

• Accessibilità: lo screen reader legge l'etichetta quando l'utente raggiunge il campo
• Usabilità: cliccando sulla label, il cursore va nel campo (area cliccabile più grande)

<label for="nome_utente">Nome Utente:</label>
<input type="text" id="nome_utente">

Come Viaggiano i Dati

Tre concetti fondamentali per capire come i form inviano informazioni:

1. name — il badge identificativo per il server

L'attributo name identifica il dato per il server. Come un badge identificativo: senza badge, il server ignora il campo. Il name è l'etichetta per il server; il <label> è l'etichetta per l'utente.

2. value — il valore associato

Per i campi di testo, il value è ciò che l'utente digita. I dati viaggiano come coppie name=value (es. username=Mario).

3. placeholder — il testo fantasma

Testo suggerimento nel campo vuoto, come il testo grigio scritto a matita in un modulo cartaceo: scompare quando si inizia a scrivere. NON sostituisce la <label>.

4. <button type="submit">

Il pulsante che avvia la raccolta e l'invio di tutte le coppie name=value.

<form action="/processa" method="POST">
  <label for="user">Nome Utente:</label>
  <input type="text" id="user" name="username" placeholder="mario_rossi">

  <button type="submit">Invia</button>
</form>
<!-- Se l'utente scrive "Mario", il server riceve: username=Mario -->

Campi Speciali: Password e Email

Oltre a type="text", esistono tipi di input specializzati che il browser gestisce in modo diverso:

type="password":

• Maschera il testo con pallini (••••) — protezione visiva da sguardi indiscreti
• Attenzione: è solo una maschera visiva! La password viaggia come testo normale nella richiesta

type="email":

• Il browser verifica che il testo assomigli a un'email (contiene @, dominio, ecc.)
• Su mobile, mostra una tastiera ottimizzata con @ e . subito accessibili
• Se il formato è sbagliato, blocca l'invio con un messaggio di errore

<input type="password" id="pwd" name="password">
<input type="email" id="email" name="user_email">

Testo su Più Righe: <textarea>

Per messaggi, commenti o descrizioni lunghe, <input> non basta: serve <textarea>.

Differenze strutturali da <input>:

• Ha tag di apertura e chiusura: <textarea>...</textarea>
• Il testo predefinito va tra i tag (non nell'attributo value)
• Qualsiasi contenuto tra i tag viene trattato come testo semplice

Attributi per dimensioni suggerite:

• rows: numero di righe visibili (altezza iniziale)
• cols: numero di caratteri visibili (larghezza iniziale)
• Oggi si preferisce il CSS per le dimensioni reali
• Molti browser permettono il ridimensionamento manuale (gestibile con CSS resize)
• placeholder funziona anche qui

<label for="messaggio">Il vostro messaggio:</label>
<textarea id="messaggio" name="user_message" rows="5" cols="40"
          placeholder="Scrivete qui il messaggio..."></textarea>

Raggruppare con <fieldset> e <legend>

Quando i form crescono, servono raggruppamenti logici. Come i cassetti di un armadietto: ogni cassetto contiene documenti correlati, con un'etichetta sul fronte.

• <fieldset>: il cassetto. Raggruppa controlli correlati. Il browser disegna un bordo attorno.
• <legend>: l'etichetta del cassetto. Deve essere il primo elemento figlio dentro <fieldset>.

Benefici:

• Chiarezza visiva: il form è diviso in sezioni
• Accessibilità: lo screen reader annuncia la <legend> prima di ogni campo nel gruppo

<fieldset>
  <legend>Dati Anagrafici</legend>
  <p>
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome">
  </p>
  <p>
    <label for="cognome">Cognome:</label>
    <input type="text" id="cognome" name="cognome">
  </p>
</fieldset>

Scelta Singola: Radio Button

Quando l'utente deve scegliere una sola opzione da un gruppo (esclusiva), si usa <input type="radio">. Come i canali di una vecchia TV: solo uno alla volta.

Regole fondamentali:

• Tutti i radio dello stesso gruppo devono avere lo stesso name: è il name condiviso che li raggruppa
• Ogni radio deve avere un value diverso: è il valore inviato al server
• checked pre-seleziona un'opzione (solo una per gruppo)
• Una volta selezionato, un radio non può essere deselezionato senza JavaScript
• Ogni radio ha la propria <label> (con for/id)
• Vanno sempre dentro <fieldset>/<legend> per l'accessibilità

<fieldset>
  <legend>Dimensione Bevanda</legend>
  <p>
    <input type="radio" id="piccolo" name="dimensione" value="s">
    <label for="piccolo">Piccolo</label>
  </p>
  <p>
    <input type="radio" id="medio" name="dimensione" value="m">
    <label for="medio">Medio</label>
  </p>
  <p>
    <input type="radio" id="grande" name="dimensione" value="l" checked>
    <label for="grande">Grande</label>
  </p>
</fieldset>
<!-- Se scelgo "Medio", il server riceve: dimensione=m -->

Scelta Multipla: Checkbox

Quando l'utente può scegliere zero, una o più opzioni (non esclusive), si usa <input type="checkbox">. Come una lista della spesa: spunti quello che vuoi.

Gestione del name:

• Opzioni correlate (stessa domanda, es. "interessi"): stesso name, con [] alla fine → name="interessi[]"
• Opzioni indipendenti (es. "accetto termini", "newsletter"): name diversi

value è fondamentale! Se manca, il browser invia un inutile "on". Specificatelo sempre.

Solo le checkbox selezionate vengono inviate. checked pre-seleziona (più di una possibile).

<!-- Stesso name per opzioni correlate -->
<fieldset>
  <legend>Interessi</legend>
  <input type="checkbox" id="sport" name="interessi[]" value="sport">
  <label for="sport">Sport</label>
  <input type="checkbox" id="musica" name="interessi[]" value="musica" checked>
  <label for="musica">Musica</label>
</fieldset>

<!-- Name diversi per opzioni indipendenti -->
<input type="checkbox" id="terms" name="accetta_termini" value="si">
<label for="terms">Accetto i termini</label>

<!-- Senza value: il browser invia "on" -->
<input type="checkbox" id="test" name="test_senza_value">
<label for="test">Test senza value</label>

Riepilogo

Menu a Tendina: <select> e <option>

Per scegliere da una lista predefinita di opzioni, si usa il menu a tendina (dropdown) con <select> e <option>.

• <select>: il contenitore, con name (per l'invio) e id (per la label)
• <option>: ogni voce selezionabile. Il testo tra i tag è ciò che l'utente vede; l'attributo value è ciò che viene inviato al server

Specificare sempre value: se manca, il browser invia il testo interno dell'opzione.

<label for="nazione">Nazione:</label>
<select id="nazione" name="user_nation">
  <option value="it">Italia</option>
  <option value="fr">Francia</option>
  <option value="de">Germania</option>
</select>

Opzioni Predefinite e Segnaposto

Attributi per controllare il comportamento delle opzioni:

• selected: opzione predefinita al caricamento della pagina
• disabled: opzione visibile ma non selezionabile (appare grigia)

Pattern segnaposto (best practice):

<option value="" disabled selected>-- Selezionate un paese --</option>

Con value="" + disabled + selected: appare come scelta iniziale, obbliga l'utente a scegliere attivamente. Se il <select> ha required, questa opzione non sarà considerata valida.

<label for="paese">Paese di Residenza:</label>
<select id="paese" name="user_country">
  <option value="" disabled selected>-- Selezionate un paese --</option>
  <option value="it">Italia</option>
  <option value="fr">Francia</option>
  <option value="es" disabled>Spagna (Non disponibile)</option>
</select>

Raggruppare e Selezione Multipla

<optgroup> per raggruppare opzioni sotto un titolo non selezionabile:

• Attributo label obbligatorio (il titolo del gruppo)

<select id="bevanda" name="drink">
  <optgroup label="Bevande Calde">
    <option value="the">Tè</option>
    <option value="caffe">Caffè</option>
  </optgroup>
  <optgroup label="Bevande Fredde">
    <option value="acqua">Acqua</option>
    <option value="succo">Succo</option>
  </optgroup>
</select>

multiple per selezione multipla:

• Trasforma la tendina in una lista scrollabile
• L'utente seleziona più voci con Ctrl/Cmd+Click
• size suggerisce quante righe mostrare
• Il server riceve più valori per lo stesso name

<select id="ingredienti" name="pizza[]" multiple size="5">
  <option value="pomodoro">Pomodoro</option>
  <option value="mozzarella">Mozzarella</option>
  <option value="basilico">Basilico</option>
  <option value="funghi">Funghi</option>
  <option value="prosciutto">Prosciutto</option>
</select>

Input Numerici

<input type="number"> per valori numerici:

• Mostra spinner (+/-) su desktop, tastiera numerica su mobile
• Attributi: min, max, step, value, placeholder

<input type="number" name="qty" min="1" max="10" step="1" value="1">
<input type="number" name="price" min="0" step="0.01" placeholder="Es. 19.99">
<input type="number" name="measure" step="any">

Lo Slider e <output>

<input type="range"> per selezione approssimativa con cursore:

• Essenziale specificare min, max, step
• Problema principale: non mostra il valore numerico selezionato!

<output> risolve: elemento semantico per mostrare risultati. Si collega con for (punta all'id del range).

Con solo HTML, il valore non si aggiorna muovendo lo slider. Serve JavaScript.

<label for="soddisfazione">Soddisfazione (1-5):</label>
<input type="range" id="soddisfazione" name="satisfaction"
       min="1" max="5" step="1" value="3">
<output for="soddisfazione">3</output>

Date e Orari

Gestire date e orari è complicato: 10/10, Oct 10, 10 Ottobre... HTML semplifica con input specializzati che attivano selettori nativi e inviano formati standardizzati.

Vincoli con min, max, step:

• min/max: limite date/ore selezionabili (formato coerente col tipo)
• step per time: in secondi (900 = 15 min, 1800 = 30 min)
• step per date: in giorni (7 = stesso giorno della settimana)

<input type="date" name="event_date">
<input type="time" name="start_time" min="07:00" max="18:00" step="1800">
<input type="datetime-local" name="arrival"
       min="2026-01-01T00:00" max="2026-12-31T23:59">

Input Specializzati: search, tel, url

<input type="search" name="query" placeholder="Parola chiave...">
<input type="tel" name="phone" placeholder="+39 123 456 7890">
<input type="url" name="website" placeholder="https://esempio.com">

Colore e Campo Nascosto

type="color": apre il selettore colori nativo del sistema operativo. Il valore è sempre una stringa esadecimale #rrggbb minuscola.

<input type="color" name="fav_color" value="#0000ff">

type="hidden": campo completamente invisibile all'utente, ma partecipa all'invio. Deve avere name e value nel codice. Non necessita <label>.

Casi d'uso: ID utente, token di sicurezza, ID prodotto, timestamp, versione del form.

<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="csrf_token" value="aBcDeF">

Suggerimenti con <datalist>

<datalist> offre suggerimenti di autocompletamento senza forzare la scelta.

Funzionamento:

1. Si crea un <datalist> con id e <option> con i suggerimenti
2. Si collega a un <input> con l'attributo list (punta all'id del datalist)
3. Il datalist è invisibile. Quando l'utente digita, il browser mostra le opzioni corrispondenti
4. L'utente può scegliere un suggerimento o ignorarlo e scrivere altro

Funziona con: text, search, url, tel, email. Supporto variabile per date, time, number, range, color.

<input type="text" id="browser" name="user_browser" list="browsers_list">

<datalist id="browsers_list">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

Riepilogo

Validazione Client-Side

HTML integra meccanismi di validazione eseguiti direttamente dal browser (lato client), senza JavaScript. Lo scopo principale è migliorare l'esperienza utente, fornendo feedback immediato su errori di compilazione.

Analogia: il buttafuori e la security

• Il buttafuori (validazione client-side) controlla all'ingresso: "Hai il documento? Sei maggiorenne?" Aiuta a tenere fuori chi ovviamente non dovrebbe entrare.
• La security interna (validazione server-side) controlla di nuovo dentro, con più attenzione e strumenti migliori.
• Servono ENTRAMBI: il buttafuori per comodità (feedback immediato), la security per sicurezza reale.

Campi Obbligatori: required

L'attributo required su <input>, <select> o <textarea> impedisce l'invio se il campo è vuoto.

Se l'utente prova a inviare:

1. Il browser blocca l'invio
2. Mostra un messaggio di errore standard
3. Sposta il focus sul campo non valido

Best practice: accompagnare i campi required con un indicatore visivo (es. *) nella label.

<label for="nome_req">Nome: <span style="color:red;">*</span></label>
<input type="text" id="nome_req" name="username" required>

Limiti e Formato

Oltre a required, altri attributi di validazione client-side:

Lunghezza testo:

• minlength: minimo caratteri richiesti
• maxlength: massimo caratteri consentiti (spesso blocca la digitazione)

Valori numerici/date (già visti): min, max, step

Formato specifico con pattern:

• Accetta una Regular Expression (regex): un mini-linguaggio per descrivere schemi di testo
• Esempio CAP: pattern="[0-9]{5}" = "5 cifre numeriche"
• Usare title per spiegare il formato richiesto (appare nel messaggio di errore)
• Non serve impararle nel dettaglio ora, si trovano pronte online

<input type="password" name="pwd" required minlength="8">
<input type="text" name="zip" required pattern="[0-9]{5}"
       title="Il CAP deve contenere 5 cifre.">

Upload di File

<input type="file"> renderizza un pulsante "Sfoglia" per caricare file.

accept suggerisce quali tipi di file mostrare nella finestra di selezione:

• Estensioni: .jpg, .png
• Tipo MIME generico: image/* (qualsiasi immagine). I Tipi MIME sono etichette standard che identificano il tipo di un file su Internet.
• Tipo MIME specifico: application/pdf
• NON è validazione sicura: il server deve sempre verificare

Altri attributi:

• multiple: selezionare più file contemporaneamente
• required: upload obbligatorio
• capture: su mobile, suggerisce fotocamera (user per selfie, environment per posteriore)

<input type="file" name="photo" accept=".jpg,.png,image/*">
<input type="file" name="docs[]" accept="application/pdf" multiple required>

La Regola d'Oro dell'Upload

Per l'upload di file servono obbligatoriamente due attributi sul <form>:

1. method="POST": i file sono dati binari, non possono viaggiare nell'URL
2. enctype="multipart/form-data": dice al browser di usare un "pacco speciale" per spedire file e testo insieme. Il default (application/x-www-form-urlencoded) non funziona per i file.

Analogia: spedire una lettera con una foto allegata richiede un pacco con scomparti separati — uno per la lettera (testo), uno per la foto (file).

Senza method="POST" e enctype="multipart/form-data", l'upload fallirà.

<!-- CORRETTO -->
<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="documento">
  <button type="submit">Carica</button>
</form>

<!-- SBAGLIATO: manca enctype! -->
<form action="/upload" method="POST">
  <input type="file" name="documento">
  <button type="submit">Carica (non funzionerà)</button>
</form>

Tipi di Pulsanti

Tre tipi di pulsante (attributo type):

• submit (default dentro un form): invia il form e attiva la validazione
• reset: ripristina tutti i campi ai valori iniziali. Quasi sempre sconsigliato: un click accidentale cancella tutto senza conferma e senza possibilità di annullare. Accettabile solo in form brevi dove ricompilare costa poco (es. filtri di ricerca, calcolatori)
• button: neutro, non fa nulla di default. Serve per azioni JavaScript personalizzate

Nota: preferite <button> a <input type="submit"> — può contenere HTML ricco (icone, testo formattato), mentre <input> accetta solo testo semplice via value.

<form action="/api/echo" method="POST">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">

  <button type="submit">Invia (submit)</button>
  <button type="button" onclick="alert('Non invio nulla!')">Azione Custom (button)</button>
  <button type="reset">Reset</button>
</form>

Accessibilità dei Form

L'uso corretto degli elementi HTML semantici (<form>, <label>, <input>, <button>, <fieldset>, <legend>) è la fondazione dell'accessibilità.

Benefici automatici del browser (senza codice aggiuntivo):

• Struttura comprensibile: screen reader interpreta correttamente gli elementi
• Navigazione da tastiera: Tab / Shift+Tab per muoversi tra controlli
• Focus visibile: il browser evidenzia l'elemento attivo (outline)

Evitare "finti controlli" con <div>/<span> + JavaScript: richiedono di reimplementare manualmente tutta l'accessibilità, rendendo il codice complesso e fragile.

<!-- BUONO: semantico e accessibile -->
<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">

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

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

<!-- CATTIVO: finti controlli con div -->
<div class="fake-form">
  <span>Nome:</span>
  <div class="fake-input">Scrivi qui...</div>

  <span>Email:</span>
  <div class="fake-input">Scrivi qui...</div>

  <div class="fake-button" onclick="...">Invia</div>
</div>

Indicatori e Controllo Validazione

Indicare campi obbligatori in modo accessibile:

• Includere * dentro la <label> (non fuori)
• Aggiungere una legenda all'inizio del form: "I campi con * sono obbligatori"
• Opzionalmente, usare <span aria-label="obbligatorio">*</span>

Disabilitare la validazione automatica:

• novalidate sul <form>: disabilita per tutto il form (utile se la validazione è gestita da JS)
• formnovalidate su un <button type="submit">: disabilita solo per quel pulsante (utile per "Salva Bozza")

<form novalidate> <!-- Nessun messaggio automatico -->
  <input type="email" required>
  <button type="submit">Invia (validazione JS)</button>
  <button type="submit" formnovalidate>Salva Bozza</button>
</form>

Riepilogo