Form HTML

Introduzione

Un form HTML è una porzione di pagina web che permette agli utenti di inserire e inviare dati. Ogni volta che ci registriamo, scriviamo un commento, facciamo una ricerca o effettuiamo un acquisto online, stiamo usando un form.

A differenza delle prime tre lezioni, qui non parleremo di layout o stili: i form sono il ponte tra HTML statico e applicazioni dinamiche. In questa lezione vedremo come costruirli, come validare i dati e come questi viaggiano fino al server.

L'elemento <form>

Il tag <form> è il contenitore che raggruppa tutti i campi e definisce dove e come saranno inviati i dati. Al suo interno si inseriscono input, textarea, select e pulsanti.

<form action="/contatti" method="post"
      onsubmit="event.preventDefault(); alert('Form inviato (demo)')">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>

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

Attributi principali

Tipi di input

L'elemento <input> cambia comportamento drasticamente in base all'attributo type. Vediamoli per categorie.

Testuali — text, password, email, url, tel, search

Pur somigliandosi visivamente, alcuni di questi attivano una tastiera virtuale specifica su mobile e applicano una validazione automatica.

<form onsubmit="event.preventDefault()">
  <label>Nome
    <input type="text" name="nome" placeholder="Mario Rossi">
  </label>

  <label>Password
    <input type="password" name="pwd" placeholder="La tua password">
  </label>

  <label>Email
    <input type="email" name="email" placeholder="nome@esempio.ch">
  </label>

  <label>URL
    <input type="url" name="sito" placeholder="https://...">
  </label>

  <label>Telefono
    <input type="tel" name="tel" placeholder="+41 91 ...">
  </label>

  <label>Ricerca
    <input type="search" name="q" placeholder="Cerca...">
  </label>
</form>

Numerici — number, range

Si combinano con min, max e step per definire i vincoli. Lo slider qui sotto aggiorna live il valore mostrato.

<form onsubmit="event.preventDefault()">
  <label>Età (number, 0–120)
    <input type="number" name="eta" min="0" max="120" step="1" value="25">
  </label>

  <label>
    Volume: <output id="vol-out">50</output>
    <input type="range" name="volume"
           min="0" max="100" value="50"
           oninput="document.getElementById('vol-out').value = this.value">
  </label>
</form>

Data/tempo — date, time, datetime-local, month, week

Mostrano un selettore (date picker) appropriato. Aspetto e supporto variano leggermente tra browser.

<form onsubmit="event.preventDefault()">
  <label>Data
    <input type="date" name="data">
  </label>

  <label>Ora
    <input type="time" name="ora">
  </label>

  <label>Data e ora
    <input type="datetime-local" name="dt">
  </label>
</form>

Selezione — checkbox e radio

La differenza fondamentale: checkbox = più scelte indipendenti; radio = scelta unica fra opzioni dello stesso gruppo. Per raggruppare radio button basta condividere lo stesso name.

<form onsubmit="event.preventDefault()">
  <fieldset>
    <legend>Hobby (più scelte — checkbox)</legend>
    <label><input type="checkbox" name="hobby" value="lettura"> Lettura</label>
    <label><input type="checkbox" name="hobby" value="sport"> Sport</label>
    <label><input type="checkbox" name="hobby" value="musica"> Musica</label>
  </fieldset>

  <fieldset>
    <legend>Pasto preferito (scelta unica — radio, stesso name)</legend>
    <label><input type="radio" name="pasto" value="colazione"> Colazione</label>
    <label><input type="radio" name="pasto" value="pranzo"> Pranzo</label>
    <label><input type="radio" name="pasto" value="cena"> Cena</label>
  </fieldset>
</form>

File — type="file"

Permette il caricamento di uno o più file. accept filtra i tipi accettati, multiple abilita la selezione multipla.

<!-- una sola immagine -->
<input type="file" name="foto" accept="image/*">

<!-- più documenti PDF/DOCX -->
<input type="file" name="docs" accept=".pdf,.docx" multiple>

Speciali — color, hidden

Il color picker apre il selettore nativo del sistema. Il colore scelto colora live il quadrato accanto.

<form onsubmit="event.preventDefault()">
  <label>Scegli un colore
    <input type="color" name="colore" value="#0ea5e9"
           oninput="document.getElementById('swatch').style.background = this.value;
                    document.getElementById('hex').textContent = this.value">
  </label>

  <div class="swatch-row">
    <div id="swatch"></div>
    <code id="hex">#0ea5e9</code>
  </div>
</form>

<!-- Hidden: l'utente non lo vede, ma viene inviato -->
<input type="hidden" name="id_utente" value="42">

Azioni — submit, reset, button, image

Pulsanti realizzati tramite <input>. Sono ancora supportati per retrocompatibilità, ma nei progetti nuovi è preferibile il tag <button> (vedi sezione successiva).

<input type="submit" value="Invia">
<input type="reset"  value="Resetta">

Tabella riassuntiva

Label e accessibilità

La <label> è uno degli elementi più sottovalutati e più importanti dei form. Ogni input dovrebbe avere una label associata.

• Accessibilità — gli screen reader leggono la label all'utente quando il focus arriva sul campo.
• Usabilità — cliccando sul testo della label il focus passa automaticamente al campo. Cruciale per checkbox e radio, che hanno aree cliccabili minuscole.
• Chiarezza — il modulo è più comprensibile e professionale.

Metodo 1 — for / id (raccomandato)

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

La label e l'input possono stare anche distanti nel codice, purché gli identificatori coincidano.

Metodo 2 — annidamento

<label>
  <input type="checkbox" name="newsletter"> Iscriviti alla newsletter
</label>

Non serve id/for. Particolarmente comodo per checkbox e radio.

Altri elementi dei form

<textarea> — testo multi-riga

Mentre <input type="text"> è limitato a una riga,<textarea> permette testo lungo su più righe. Va sempre chiusa con </textarea>; il valore iniziale si scrive fra i tag, non con value.

<label for="messaggio">Messaggio:</label>
<textarea id="messaggio" name="messaggio"
          rows="5" cols="40" maxlength="500"
          placeholder="Scrivi qui..."></textarea>

<select>, <option> e <optgroup>

Menu a tendina. L'attributo value di <option> è ciò che viene inviato; il testo visibile è solo per l'utente. Con liste lunghe conviene raggruppare in <optgroup>.

<label for="citta">Città:</label>
<select id="citta" name="citta">
  <optgroup label="Svizzera">
    <option value="lugano">Lugano</option>
    <option value="bellinzona" selected>Bellinzona</option>
    <option value="zurigo">Zurigo</option>
  </optgroup>
  <optgroup label="Italia">
    <option value="milano">Milano</option>
    <option value="roma">Roma</option>
  </optgroup>
</select>

<!-- Selezione multipla -->
<select name="lingue" multiple size="4">
  <option value="it" selected>Italiano</option>
  <option value="en">English</option>
  <option value="de">Deutsch</option>
</select>

<button> — pulsanti moderni

A differenza di <input type="submit">, può contenere HTML al suo interno (icone, testo formattato, ecc.). I tre type:

<button type="submit">Invia</button>
<button type="reset">Annulla</button>
<button type="button">Pulsante generico</button>

<fieldset> e <legend> — raggruppare campi

Quando un form ha molti campi, è utile organizzarli in gruppi tematici con <fieldset>. <legend>, posto come primo figlio, fornisce un titolo annunciato dagli screen reader come contesto per tutti i campi interni.

<form action="/registrazione" method="post">
  <fieldset>
    <legend>Dati personali</legend>
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome">

    <label for="cognome">Cognome:</label>
    <input type="text" id="cognome" name="cognome">
  </fieldset>

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

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

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

Validazione HTML5

HTML5 offre attributi che fanno validare i dati al browser, prima ancora di inviarli al server. Se i dati non sono validi, il browser mostra un messaggio di errore e blocca l'invio.

Gli attributi di validazione

Prova a inviare il form qui sotto con campi vuoti o malformati: il browser mostra il messaggio di errore in italiano. Lo stile :user-invalid colora di rosso solo i campi che l'utente ha già toccato.

<form onsubmit="event.preventDefault(); alert('Tutto valido!')">
  <label>Username (3–20 caratteri, obbligatorio)
    <input type="text" name="username"
           minlength="3" maxlength="20" required>
  </label>

  <label>Email (obbligatoria)
    <input type="email" name="email" required>
  </label>

  <label>Età (18–99)
    <input type="number" name="eta" min="18" max="99">
  </label>

  <label>CAP svizzero (4 cifre)
    <input type="text" name="cap"
           pattern="[0-9]{4}"
           title="Inserisci un CAP svizzero di 4 cifre">
  </label>

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

Pattern e regex (cenno)

L'attributo pattern richiede che il valore corrisponda a un'espressione regolare. Le regex sono un argomento ampio: per ora basti sapere che esistono e sono lo strumento per validazioni complesse.

<!-- esattamente 4 cifre (es. CAP svizzero) -->
<input type="text" name="cap" pattern="[0-9]{4}"
       title="Inserisci un CAP svizzero di 4 cifre" required>

<!-- targa svizzera tipo TI 12345 -->
<input type="text" name="targa" pattern="[A-Z]{2} [0-9]{1,6}">

Disabilitare la validazione: novalidate

<form action="/bozza" method="post" novalidate>
  <!-- la validazione è disabilitata, anche con required -->
</form>

Stilizzare i form

Gli elementi dei form si stilizzano con CSS come tutti gli altri, ma con qualche peculiarità.

Selettori utili

Esempio completo

Form di contatto con stili moderni: bordi arrotondati, focus visibile, feedback rosso su :user-invalid, hover sul bottone.

<form class="card" onsubmit="event.preventDefault(); alert('Form inviato (demo)')">
  <h2>Contattaci</h2>

  <label for="s-nome">Nome</label>
  <input id="s-nome" type="text" name="nome" required minlength="2">

  <label for="s-email">Email</label>
  <input id="s-email" type="email" name="email" required>

  <label for="s-msg">Messaggio</label>
  <textarea id="s-msg" name="messaggio" rows="4" maxlength="500"
            placeholder="Scrivi qui..."></textarea>

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

Invio dei dati

Cosa succede quando l'utente preme “Invia”? Il browser:

1. raccoglie tutti i campi del form che hanno un attributo name;
2. li impacchetta come coppie name=valore;
3. li invia all'URL specificato in action, con il metodo HTTP definito in method;
4. attende la risposta del server (a meno di intercettazione via JavaScript).

L'attributo name: il fondamento

Regola d'oro: solo i campi con name vengono inviati al server. Un campo senza name esiste visivamente, ma è invisibile ai dati trasmessi. Premi “Invia” nel demo qui sotto per vedere quali campi finiscono nella query string:

<form onsubmit="
  event.preventDefault();
  const data = new FormData(this);
  const out = [];
  for (const [k, v] of data.entries()) out.push(k + '=' + v);
  document.getElementById('out').textContent =
    out.length ? out.join('&') : '(nessun campo con name)';
">
  <label>Username (HA name) — viene inviato
    <input type="text" name="username" value="mario">
  </label>

  <label>Email (NO name) — NON viene inviato
    <input type="email" id="email" value="mario@esempio.ch">
  </label>

  <label>Newsletter (HA name)
    <input type="checkbox" name="newsletter" value="si" checked>
  </label>

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

  <div class="result">
    <strong>Query string risultante:</strong>
    <code id="out">— premi "Invia" per vedere —</code>
  </div>
</form>

L'attributo action: dove vanno i dati

<!-- URL relativo: stesso dominio del sito -->
<form action="/registrazione" method="post">

<!-- URL assoluto: dominio diverso -->
<form action="https://api.esempio.ch/contatti" method="post">

<!-- Action vuoto: stessa pagina (default) -->
<form action="" method="post">

L'attributo method: GET vs POST

<form action="/cerca" method="get">
  <input type="text" name="q" value="formaggio">
  <input type="text" name="cat" value="alimentari">
  <button type="submit">Cerca</button>
</form>

<!-- URL risultante -->
<!-- /cerca?q=formaggio&cat=alimentari -->

<form action="/login" method="post">
  <input type="text" name="user">
  <input type="password" name="pwd">
  <button type="submit">Login</button>
</form>

<!-- URL: /login   (i dati sono nascosti nel body) -->

L'attributo enctype

Specifica come codificare i dati prima di trasmetterli. Rilevante solo con method="post".

<!-- Form di upload: serve enctype="multipart/form-data" -->
<form action="/carica" method="post" enctype="multipart/form-data">
  <input type="file" name="documento">
  <button type="submit">Carica</button>
</form>

Cenno al backend

Il form HTML è solo metà del lavoro. L'altra metà è sul server: senza un endpoint che “ascolti”, il form non serve a nulla.

[Browser/Form]  --POST-->  [Server: PHP, Node.js, Python, ...]  -->  [Database / Email / ...]
                                                                  -->  Risposta al browser

Quando il browser invia un form, il programma server tipicamente:

1. riceve la richiesta HTTP con i dati;
2. estrae i campi cercandoli per name;
3. li valida nuovamente (mai fidarsi del client!);
4. li elabora: salva in database, invia un'email, autentica un utente, ecc.;
5. risponde al browser con una nuova pagina, un redirect o un messaggio.

La realizzazione concreta del backend viene affrontata in moduli successivi del corso, dove vedremo come scrivere endpoint che ricevono ed elaborano i form qui costruiti.

Esercizi