Bottoni HTML: differenze pratiche tra <code>&lt;button&gt;</code> e <code>&lt;input type="sub

Introduzione

Quando si lavora con i form HTML, scegliere tra <button> e <input type="submit"> sembra spesso una decisione secondaria. In realtà, questa scelta influisce su un aspetto molto pratico: come viene definito il testo del bottone, quanto è facile personalizzarlo e quanto il codice resta chiaro nel tempo.

Il punto chiave è semplice: <input type="submit"> è un elemento “auto-contenuto” che mostra il proprio testo tramite l’attributo value, mentre <button> è un contenitore vero e proprio e può includere testo, icone e anche markup HTML interno. Questa differenza cambia il modo in cui scriviamo il codice e il livello di flessibilità che otteniamo.

In questo tutorial vedremo un sotto-argomento molto utile: come gestire correttamente l’etichetta visibile del bottone nei form, evitando errori comuni e scegliendo l’elemento più adatto in base al caso reale.

Codice completo

Qui sotto trovi un esempio completo di form con due pulsanti equivalenti dal punto di vista funzionale, ma molto diversi nella gestione del contenuto visibile.

<form action="/ordine" method="post">
  <h2>Completa il tuo ordine</h2>

  <p>
    <label for="nome">Nome</label>
    <input type="text" id="nome" name="nome" required>
  </p>

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

  <p>
    <label for="note">Note aggiuntive</label>
    <textarea id="note" name="note"></textarea>
  </p>

  <!-- Bottone submit con <input>: il testo si imposta con value -->
  <input type="submit" value="Invia ordine">

  <!-- Bottone submit con <button>: il testo è nel contenuto interno -->
  <button type="submit">
    Invia ordine
  </button>

  <!-- Esempio di bottone più ricco: testo + icona testuale -->
  <button type="submit">
    &#128230; Conferma acquisto
  </button>
</form>

Spiegazione

Vediamo ora cosa cambia davvero tra i due elementi.

<input type="submit">: testo tramite value

L’elemento <input type="submit"> è pensato per essere semplice e diretto. Non ha un tag di apertura e chiusura, quindi non può contenere testo o elementi interni. Il testo mostrato all’utente viene definito con l’attributo value.

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

Questo approccio è utile quando vuoi un bottone essenziale, rapido da scrivere e molto chiaro. Però ha un limite importante: non puoi inserire HTML interno. Quindi niente icone dentro il bottone, niente <strong>, niente struttura complessa.

<button>: contenuto interno flessibile

L’elemento <button> è più versatile. Il testo visibile non si imposta con value, ma si scrive direttamente tra i tag di apertura e chiusura.

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

Questa differenza diventa molto utile quando il bottone deve essere più ricco dal punto di vista visivo o semantico. Ad esempio, puoi aggiungere un’icona, una parte di testo evidenziata o un layout più articolato.

<button type="submit">
  <strong>Conferma</strong> acquisto
</button>

Dal punto di vista del comportamento nel form, entrambi possono inviare i dati. La vera differenza, in questo tutorial, è che <button> ti dà maggiore controllo sul contenuto del pulsante.

Quando la differenza conta davvero

Questa distinzione è importante in scenari reali come:

• form con interfaccia moderna, dove il bottone deve includere un’icona;
• localizzazione, quando il testo cambia spesso e vuoi mantenerlo centralizzato;
• design system, dove il bottone può contenere elementi aggiuntivi;
• accessibilità e chiarezza, quando il nome visibile deve essere molto preciso.

Se ti serve solo un pulsante semplice, <input type="submit"> va benissimo. Se invece vuoi un bottone più espressivo e personalizzabile, <button> è la scelta migliore.

Best practice

Per usare questi elementi in modo corretto e mantenere il codice pulito, segui queste buone pratiche.

• Usa type="submit" in modo esplicito su <button>, così eviti ambiguità nel comportamento del form.
• Usa value per il testo di <input type="submit">, non cercare di inserire contenuti interni perché non è possibile.
• Scegli <button> quando prevedi icone o markup interno, perché è più flessibile e leggibile nel lungo periodo.
• Evita testi generici come “OK” o “Invia” se il contesto è più specifico: meglio “Salva profilo”, “Richiedi preventivo” o “Conferma ordine”.
• Non lasciare il tipo implicito se il bottone è dentro un form: specificare type="submit", type="button" o type="reset" aiuta a prevenire errori.
• Scrivi etichette coerenti con l’azione: il testo del bottone dovrebbe descrivere chiaramente cosa succede dopo il click.

Una regola pratica utile è questa: se il testo del bottone è semplice e statico, <input type="submit"> è sufficiente; se il contenuto deve crescere o cambiare, preferisci <button>.

Riepilogo

La differenza tra <button> e <input type="submit"> non riguarda solo la sintassi, ma soprattutto come viene gestito il contenuto visibile del bottone.

• <input type="submit"> è semplice, compatto e usa value per il testo.
• <button> è più flessibile e permette contenuto interno, anche con markup.
• Per bottoni essenziali e rapidi, input è una soluzione valida.
• Per interfacce moderne, localizzate o più ricche, button è spesso la scelta migliore.

Se vuoi scrivere HTML più manutenibile, pensa sempre al bottone come a una parte dell’esperienza utente, non solo come a un elemento tecnico del form. Il testo giusto, nel posto giusto, migliora chiarezza, accessibilità e qualità del progetto.

Approfondisci con risorse ufficiali

• MDN Web Docs - <button>: documentazione completa sull’elemento button e i suoi attributi.
• MDN Web Docs - <input type="submit">: dettagli sul comportamento dei submit button.
• HTML Living Standard: specifica ufficiale del comportamento dei form e dei controlli.
• WAI-ARIA Authoring Practices: linee guida utili per comprendere accessibilità e interazione dei controlli.