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">

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.">

Perché lo Styling dei Form è Diverso

Se avete provato ad applicare CSS a un <input> o a un <select>, vi sarete accorti che non si comportano come un <div> o un <p>. I form element sono storicamente legati al sistema operativo: il browser delega il rendering di molti controlli al SO, che li disegna con il proprio aspetto nativo.

Lo stesso <input type="checkbox"> può apparire completamente diverso su Chrome, Safari, Firefox, e su Windows rispetto a macOS.

Non tutti i controlli sono ugualmente stilizzabili. Tre categorie:

• Facili (rispondono bene al CSS): <input type="text">, <textarea>, <button>, <label>
• Difficili (richiedono tecniche specifiche): <input type="checkbox">, <input type="radio">
• Molto difficili (storicamente impossibili senza JS): <select>, <input type="date">, <input type="range">, <input type="file">

Altro problema: i form element non ereditano font-family e font-size dal genitore come la maggior parte degli elementi HTML. Se impostate un font sulla pagina, i vostri <input> e <button> continueranno a usare il font di default del browser. Va corretto manualmente.

La Proprietà appearance e il Reset Base

Il primo strumento per riprendere il controllo è la proprietà CSS appearance. Impostando appearance: none, dite al browser: "Non disegnare questo controllo con lo stile nativo — lascia che sia io a decidere l'aspetto con il mio CSS".

Oltre ad appearance, serve un reset base che risolva i problemi di ereditarietà dei font e del dimensionamento:

/* Reset base per i form element */
button,
input,
select,
textarea {
  font-family: inherit;   /* Eredita il font dalla pagina */
  font-size: 16px;        /* Dimensione leggibile, evita zoom su mobile */
  box-sizing: border-box; /* Padding e bordo inclusi nella larghezza */
}

La proprietà appearance: none si usa sui singoli controlli quando serve:

/* Rimuove lo stile nativo del browser */
input[type="checkbox"],
button {
  -webkit-appearance: none; /* Per Safari */
  appearance: none;
}

Il selettore input[type="checkbox"] è un selettore per attributo: seleziona tutti gli <input> il cui attributo type ha valore "checkbox". La sintassi è elemento[attributo="valore"].

Demo: Reset CSS On/Off

Nuovi Strumenti CSS per Questa Parte

Prima di procedere, tre concetti CSS che userete per la prima volta in questa parte. Li approfondirete in lezioni dedicate — qui serve solo riconoscere la sintassi.

Pseudo-classi

Selettori che si attivano in base allo stato di un elemento. Ne conoscete già una: :hover. In questa parte incontrerete:

• :focus — quando l'elemento ha il focus (click o Tab)
• :checked — quando un checkbox o radio è selezionato
• :disabled — quando un elemento ha l'attributo disabled
• :valid, :invalid — quando il valore supera o meno la validazione HTML
• :hover — passaggio del mouse (la conoscete già)

Sintassi: selettore:nome-pseudo-classe, es. input:focus.

Pseudo-elementi

Elementi "virtuali" generati dal CSS, non presenti nell'HTML. Permettono di aggiungere contenuto decorativo:

• ::before — elemento fittizio prima del contenuto
• ::after — elemento fittizio dopo il contenuto
• ::placeholder — stilizza il testo segnaposto degli input

Sintassi con due punti doppi: selettore::nome-pseudo-elemento, es. input::placeholder. Nota: ::before e ::after richiedono sempre la proprietà content (anche vuota: content: "").

Selettore per attributo

Già visto nella slide precedente: [type="checkbox"] seleziona in base a un attributo HTML. Lo userete combinato con pseudo-classi: input[type="checkbox"]:checked seleziona i checkbox selezionati.

Bordi, Padding e Font: Stilizzare Input e Textarea

Con il reset base applicato, potete personalizzare l'aspetto dei campi di testo. Le proprietà più utili:

• border — bordo personalizzato al posto di quello nativo
• padding — spazio interno per rendere il testo più leggibile
• border-radius — angoli arrotondati
• background-color — colore di sfondo

Per le textarea, aggiungete resize: vertical — impedisce all'utente di allargare il campo orizzontalmente (rompe il layout), ma permette di allungarlo verticalmente.

/* Input di testo personalizzato */
.campo-custom {
  font-size: 18px;
  font-family: inherit;
  padding: 12px 16px;
  background-color: #f0f4ff;
  border: 2px solid #6366f1;
  border-radius: 12px;
}

/* Textarea: impedisce il resize orizzontale */
textarea.campo-custom {
  resize: vertical;
}

<form>
  <label for="nome-stile">Nome:</label>
  <input type="text" id="nome-stile" name="nome" class="campo-custom">

  <label for="msg-stile">Messaggio:</label>
  <textarea id="msg-stile" name="messaggio" class="campo-custom" rows="4"></textarea>
</form>

Lo Stato :focus — Mai Rimuovere, Sempre Migliorare

Quando un utente clicca su un campo o ci arriva premendo Tab, quell'elemento riceve il focus. Il browser lo segnala con un contorno (outline) — è così che gli utenti che navigano con la tastiera sanno dove si trovano.

Regola importante: Non scrivete mai outline: none senza fornire un'alternativa visiva. Togliere il focus ring senza sostituirlo è un errore grave di accessibilità — gli utenti che navigano con la tastiera non saprebbero più su quale campo si trovano.

La tecnica corretta: cambiate il colore del bordo, aggiungete un box-shadow come "anello" e impostate outline: 3px solid transparent (per la modalità Alto Contrasto di Windows, dove le ombre non sono visibili).

/* Stato focus: anello colorato + bordo evidenziato */
.campo-custom:focus {
  border-color: #3730a3;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.8);
  outline: 3px solid transparent; /* Per Windows High Contrast */
}

<form>
  <label for="email-focus">Email:</label>
  <input type="email" id="email-focus" name="email" class="campo-custom"
         placeholder="vostro@email.it">
</form>

Provate a cliccare sul campo e poi a usare Tab per spostarvi: vedrete l'anello di focus apparire e scomparire.

::placeholder, :disabled e [readonly]

Lo pseudo-elemento ::placeholder permette di stilizzare il testo segnaposto — quel testo grigio che appare nei campi vuoti:

/* Stilizzare il placeholder */
.campo-custom::placeholder {
  color: #8b8ec5;
  font-style: italic;
}

Per i campi disabilitati, la pseudo-classe :disabled si attiva quando l'elemento ha l'attributo HTML disabled:

/* Stile per campi disabilitati */
.campo-custom:disabled {
  background-color: #eee;
  border-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

Per i campi di sola lettura (readonly), il selettore per attributo [readonly]:

/* Stile per campi in sola lettura */
.campo-custom[readonly] {
  background-color: #f9f9f9;
  border-style: dashed;
  color: #666;
}

La differenza tra disabled e readonly: un campo disabled non viene inviato con il form e non può ricevere il focus. Un campo readonly viene inviato ma l'utente non può modificarlo — utile per mostrare valori calcolati o pre-compilati.

<form>
  <label for="email-ph">Email:</label>
  <input type="email" id="email-ph" name="email" class="campo-custom"
         placeholder="es. mario@email.it">

  <label for="codice-ro">Codice ordine:</label>
  <input type="text" id="codice-ro" name="codice" class="campo-custom"
         value="ORD-2024-001" readonly>

  <label for="campo-dis">Campo bloccato:</label>
  <input type="text" id="campo-dis" name="bloccato" class="campo-custom"
         value="Non modificabile" disabled>
</form>

Bottoni Belli e Accessibili

I <button> nativi del browser hanno stili che variano molto tra i sistemi operativi. Per un aspetto uniforme e moderno, si parte da un reset e si ricostruisce lo stile.

/* Stile moderno per il bottone */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  min-height: 44px;       /* Area di tocco accessibile (WCAG 2.1) */
  background-color: #3e68ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

/* Hover, Focus, Active, Disabled */
.btn:hover { background-color: #2952cc; }
.btn:focus {
  outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 4px #1a3399;
}
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.btn:disabled {
  background-color: #aaa;
  cursor: not-allowed;
  box-shadow: none;
}

Passate il mouse sul bottone, cliccateci, usate Tab per raggiungerlo — ogni stato ha un feedback visivo chiaro.

Confronto: Default vs Personalizzato

Checkbox e Radio — Il Problema del Default

I checkbox e i radio button nativi presentano due problemi:

1. Aspetto diverso su ogni browser: un checkbox su Chrome non è identico a uno su Safari o Firefox, e su sistemi operativi diversi le differenze sono ancora maggiori.
2. Non si ridimensionano: modificare font-size non cambia la dimensione del checkbox nativo, che resta piccolo e fuori scala rispetto al design.

La soluzione è un processo in 4 step:

1. Nascondere lo stile nativo con appearance: none
2. Ricostruire il box con bordo, dimensioni e colori personalizzati
3. Creare il segno di spunta con il pseudo-elemento ::before
4. Aggiungere gli stati (:focus, :disabled, :hover)

Il risultato è un checkbox (o radio) completamente personalizzato, accessibile e coerente su tutti i browser.

<select> — L'Elemento Più Difficile da Stilizzare

Il <select> è stato per anni l'elemento più frustrante per chi voleva personalizzare i form. Il motivo? La lista delle opzioni (il "dropdown") è gestita direttamente dal sistema operativo — il CSS non può raggiungerla. Per questo, molti sviluppatori hanno costruito select falsi con JavaScript, perdendo accessibilità e prestazioni.

Con il CSS classico, si poteva stilizzare solo il "bottone" esterno del select — quello che mostra l'opzione selezionata. La lista restava nativa, con l'aspetto del SO.

Vi mostriamo due approcci: quello tradizionale (funziona ovunque) e quello nuovo (sperimentale, Chrome 135+), che finalmente permette di personalizzare tutto.

Stilizzare Campi Obbligatori e Opzionali

Ricordate la validazione HTML vista nelle Parti precedenti? Con CSS potete dare feedback visivo immediato sulla natura dei campi.

Due pseudo-classi:

• :required — si attiva su ogni campo che ha l'attributo required
• :optional — si attiva su ogni campo che non ha required

/* Campi obbligatori: bordo pieno e più evidente */
input:required,
textarea:required,
select:required {
  border: 2px solid #333;
}

/* Campi opzionali: bordo tratteggiato e più leggero */
input:optional,
textarea:optional,
select:optional {
  border: 2px dashed #999;
}

<form>
  <label for="nome-req">Nome: *</label>
  <input type="text" id="nome-req" name="nome" required
         class="campo-custom">

  <label for="tel-opt">Telefono (opzionale):</label>
  <input type="tel" id="tel-opt" name="telefono"
         class="campo-custom">

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

Un consiglio: non usate solo il colore per distinguere obbligatorio da opzionale — è problematico per utenti con daltonismo. Affiancate sempre un indicatore testuale, come l'asterisco * nella label o la scritta "(opzionale)".

:invalid vs :user-invalid — La Differenza che Conta

Le pseudo-classi :valid e :invalid si attivano in base alla validazione HTML del campo. Per esempio, un <input type="email" required> è :invalid se è vuoto o contiene un testo che non è un indirizzo email.

C'è un grosso problema: :invalid si attiva subito al caricamento della pagina, prima che l'utente abbia toccato il form!

/* PROBLEMA: bordo rosso SUBITO, anche prima che l'utente scriva! */
input:invalid {
  border: 2px solid red;
}

/* SOLUZIONE: bordo rosso solo DOPO che l'utente ha interagito */
input:user-invalid,
textarea:user-invalid {
  border: 2px solid #d32f2f;
  background-color: #fff5f5;
}

/* Bordo verde quando il valore è corretto, dopo l'interazione */
input:user-valid,
textarea:user-valid {
  border: 2px solid #2e7d32;
  background-color: #f5fff5;
}

:user-valid e :user-invalid sono supportate da tutti i browser moderni (Baseline 2023). Usate sempre :user-invalid al posto di :invalid per la validazione visiva.

accent-color — Il Colore del Brand in Una Riga

Per un cambio di colore rapido, esiste una scorciatoia: la proprietà accent-color. Con una sola riga di CSS, colorate i controlli nativi del browser — checkbox, radio, range slider e progress bar:

/* Una riga per colorare checkbox, radio, range e progress */
:root {
  accent-color: #3e68ff;
}

/* Oppure su singoli elementi */
input[type="checkbox"] {
  accent-color: #3e68ff;
}
input[type="radio"] {
  accent-color: hotpink;
}

Il browser sceglie automaticamente il colore giusto per il segno di spunta (bianco su sfondo scuro, scuro su sfondo chiaro) garantendo il contrasto.

Quando usare accent-color vs appearance: none? Se vi serve solo cambiare il colore dei controlli nativi, accent-color è perfetta — veloce, accessibile, nessun rischio. Se vi serve personalizzare la forma, le dimensioni o aggiungere animazioni, serve la tecnica completa con appearance: none + ::before.

field-sizing: content — Dimensioni Automatiche

Avete mai desiderato che una textarea crescesse automaticamente man mano che l'utente scrive? La proprietà field-sizing: content fa esattamente questo.

textarea {
  field-sizing: content;
  min-height: 56px;    /* Almeno ~3 righe */
  min-width: 200px;
  max-width: 500px;
}

select {
  field-sizing: content;
  min-width: 80px;
}

input {
  field-sizing: content;
  min-width: 100px;
  max-width: 400px;
}

Supporto browser: Chrome 123+, Edge 123+, Safari 26.2+. Firefox non lo supporta ancora. Usatelo come progressive enhancement — i browser che non lo supportano mostreranno i campi a dimensione fissa. Nessun danno.

Riepilogo — Styling dei Form CSS

Ricordate:

• Partite sempre dal reset (font: inherit, box-sizing)
• Non togliete mai il focus ring senza un'alternativa
• Usate :user-invalid al posto di :invalid per la validazione visiva
• accent-color è la scorciatoia perfetta per un branding rapido