Bottoni HTML accessibili: confronto pratico tra <code><button></code> e <code><input type

Introduzione

Quando si costruisce un modulo HTML, il controllo che invia i dati può essere realizzato principalmente con <button> oppure con <input type="submit">. A prima vista sembrano equivalenti, perché entrambi permettono all’utente di inviare un <form>. In realtà presentano differenze importanti nella struttura, nell’accessibilità, nella personalizzazione del contenuto e nella gestione di più azioni.

Un sotto-argomento particolarmente utile è capire come scegliere il controllo più adatto quando il modulo deve essere accessibile e contenere azioni diverse, come “Salva”, “Anteprima” o “Invia”. In questi casi, non basta modificare l’aspetto grafico: è necessario definire correttamente il comportamento semantico del bottone.

La regola generale è semplice: usa <input type="submit"> per un invio molto semplice e basato esclusivamente su testo; preferisci <button> quando hai bisogno di contenuto più ricco, più azioni o maggiore controllo semantico.

Codice completo

<form action="/registrazione" method="post">
  <fieldset>
    <legend>Crea un account</legend>

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

    <label for="password">Password</label>
    <input
      id="password"
      name="password"
      type="password"
      autocomplete="new-password"
      minlength="8"
      required
    >

    <div>
      <button type="submit" name="azione" value="registrazione">
        Crea account
      </button>

      <button type="submit" name="azione" value="anteprima"
              formnovalidate>
        Anteprima
      </button>

      <input type="reset" value="Cancella dati">
    </div>
  </fieldset>
</form>

In questo esempio i due elementi <button> inviano lo stesso modulo, ma trasmettono valori differenti attraverso gli attributi name e value. Il server può quindi capire quale azione l’utente ha richiesto.

Il pulsante “Anteprima” utilizza formnovalidate. Questo attributo consente di inviare il modulo senza applicare la validazione HTML5 dei campi. È utile quando l’anteprima deve essere generata anche se i dati non sono ancora completi. Va usato con attenzione: non deve sostituire i controlli di sicurezza lato server.

Spiegazione

Struttura del contenuto

L’elemento <input type="submit"> è un controllo vuoto: non può contenere elementi HTML interni. Il testo visualizzato viene definito dall’attributo value.

<input type="submit" value="Invia richiesta">

Con <button>, invece, il testo è contenuto tra il tag di apertura e quello di chiusura. Questo permette di inserire anche elementi come <span> o immagini decorative.

<button type="submit">
  <span aria-hidden="true">✓</span>
  Conferma ordine
</button>

Il simbolo è marcato con aria-hidden="true" perché è decorativo e non deve essere letto inutilmente da uno screen reader. Il testo “Conferma ordine” rimane invece disponibile come nome accessibile del pulsante.

L’importanza dell’attributo type

All’interno di un modulo, un elemento <button> senza attributo type può comportarsi come un pulsante di invio. Questa scelta implicita può causare errori quando il bottone dovrebbe eseguire un’azione JavaScript, come mostrare una password o aprire una sezione.

<form>
  <button type="button" id="mostra-password">
    Mostra password
  </button>

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

Usa quindi sempre uno dei tre valori espliciti:

type="submit" per inviare il modulo;
type="button" per un’azione che non deve inviare il modulo;
type="reset" per ripristinare i valori iniziali dei campi.

L’attributo type di <input> svolge invece un ruolo diverso: determina direttamente il tipo di controllo. Per creare un pulsante di invio è necessario scrivere type="submit".

Dati inviati al server

Un controllo viene incluso nella richiesta solo se possiede un attributo name e se è il pulsante che ha attivato l’invio. Per questo è utile assegnare un nome alle diverse azioni.

<button type="submit" name="azione" value="salva">
  Salva bozza
</button>

<button type="submit" name="azione" value="pubblica">
  Pubblica articolo
</button>

Se l’utente seleziona “Pubblica articolo”, la richiesta conterrà il dato azione=pubblica. Il backend potrà usare questo valore per applicare una logica diversa senza creare due moduli separati.

Best practice

Preferisci <button> quando il pulsante contiene icone, testo strutturato o più elementi interni.
Usa <input type="submit"> per moduli molto semplici in cui è sufficiente una breve etichetta testuale.
Specifica sempre type nei tag <button> presenti dentro un modulo.
Non usare testo vuoto o ambiguo come “Clicca qui”: scegli etichette descrittive, ad esempio “Invia richiesta di assistenza”.
Non affidarti soltanto al colore per distinguere “Salva” e “Elimina”. Il testo deve comunicare chiaramente l’azione.
Non sostituire i bottoni HTML con semplici <div> cliccabili: perderesti comportamento da tastiera e semantica accessibile.
Lascia visibile il focus da tastiera, evitando regole CSS che rimuovono completamente l’indicatore senza fornire un’alternativa.
Considera la validazione HTML5 come un aiuto lato client, ma valida sempre i dati anche sul server.
Usa formnovalidate solo per azioni realmente compatibili con dati incompleti, come un’anteprima.

Riepilogo

<button> e <input type="submit"> possono entrambi inviare un modulo, ma non offrono lo stesso livello di flessibilità. L’elemento <input> è compatto e adatto a un’etichetta testuale semplice. L’elemento <button> è più versatile, permette contenuti interni e rende più naturale la gestione di più azioni all’interno dello stesso form.

Per scrivere HTML robusto, definisci sempre il tipo del pulsante, usa etichette comprensibili, associa correttamente i campi alle loro <label> e considera sia gli utenti che usano la tastiera sia quelli che utilizzano tecnologie assistive.

Approfondisci con risorse ufficiali

Add as preferred source on Google