Bottoni HTML: quando usare <code>&lt;button&gt;</code> e quando <code>&lt;input type="submit&

Introduzione

Quando si lavora con i form in HTML, i bottoni sembrano un dettaglio semplice, ma in realtà influenzano in modo importante l’esperienza utente, la manutenzione del codice e la flessibilità dell’interfaccia. Due elementi molto usati sono <button> e <input type="submit">. A prima vista sembrano equivalenti: entrambi possono inviare un form. In pratica, però, hanno differenze significative nella struttura, nel contenuto e nella personalizzazione.

In questo tutorial ci concentriamo su un sotto-argomento molto utile: come scegliere il bottone giusto per un form multi-azione, cioè un form che non deve solo inviare i dati, ma anche offrire azioni come “Salva bozza”, “Invia ordine” o “Reset”. È uno scenario comune in dashboard, pannelli di amministrazione, checkout e moduli complessi.

Capire bene la differenza tra <button> e <input type="submit"> ti aiuta a scrivere HTML più pulito, accessibile e facile da estendere. Vedremo un esempio completo e poi analizzeremo le scelte migliori nei casi reali.

Codice completo

<form action="/ordini" method="post">
  <h3>Riepilogo ordine</h3>

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

  <p>
    <label for="prodotto">Prodotto</label><br>
    <input type="text" id="prodotto" name="prodotto" required>
  </p>

  <p>
    <label for="note">Note aggiuntive</label><br>
    <input type="text" id="note" name="note">
  </p>

  <!-- Bottone principale: invio del form -->
  <button type="submit">Invia ordine</button>

  <!-- Bottone secondario: salva bozza senza inviare il form -->
  <button type="button" id="salva-bozza">Salva bozza</button>

  <!-- Reset del form: utile ma da usare con cautela -->
  <input type="reset" value="Svuota campi">
</form>

Spiegazione

Nel codice sopra abbiamo usato <button> per l’azione principale e per un’azione secondaria, mentre <input type="reset"> per il reset. Questo esempio mostra bene il punto chiave: <button> è più flessibile, mentre <input type="submit"> è più semplice e diretto.

1. <button type="submit">

Il bottone con type="submit" invia il form. È molto usato quando vuoi inserire testo più ricco o, in futuro, aggiungere icone o elementi interni. Ad esempio puoi scrivere “Invia ordine”, “Conferma acquisto” o “Crea account” senza limiti particolari sul contenuto interno.

Con <button> puoi anche inserire markup interno, cosa impossibile con <input>. Per esempio:

<button type="submit">
  <strong>Invia</strong> il modulo
</button>

Questo rende <button> più adatto quando vuoi un’interfaccia più curata o una struttura semantica più ricca.

2. <input type="submit">

<input type="submit"> è un elemento più compatto: non ha tag di chiusura e usa l’attributo value per mostrare il testo del pulsante. È utile quando cerchi una soluzione semplice e veloce.

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

È perfetto per form piccoli o quando non hai bisogno di contenuto complesso nel bottone. Tuttavia, se vuoi aggiungere un’icona, una parte in grassetto o una struttura più articolata, diventa meno comodo rispetto a <button>.

3. <button type="button"> per azioni non submit

Un errore comune è usare <button> senza specificare il tipo. Nei form, il comportamento predefinito di <button> è spesso submit. Questo significa che, se il pulsante deve solo eseguire un’azione lato client, come salvare una bozza via JavaScript o aprire una finestra modale, devi scrivere esplicitamente type="button".

Nel nostro esempio, “Salva bozza” non deve inviare il form: per questo è type="button". Se lo lasciassi senza tipo, rischieresti un invio accidentale del form.

4. Perché il contesto multi-azione è importante

Nei form reali spesso ci sono più pulsanti con scopi diversi. Per esempio:

• Invia ordine: invia i dati al server.
• Salva bozza: memorizza temporaneamente i dati, magari via JavaScript o endpoint dedicato.
• Annulla: porta l’utente fuori dal form o resetta i campi.

In questi casi <button> è la scelta più versatile, perché puoi definire chiaramente il comportamento con l’attributo type e gestire meglio le azioni multiple. <input type="submit"> resta comunque valido quando ti serve un pulsante essenziale e standard.

Best practice

• Specifica sempre il tipo di <button>: usa type="submit", type="button" o type="reset" in modo esplicito.
• Usa <button> quando prevedi evoluzioni: se il bottone potrebbe avere icone, testo formattato o contenuto più ricco, è la scelta migliore.
• Usa <input type="submit"> per semplicità: ottimo se vuoi un controllo rapido, essenziale e facile da leggere.
• Non affidarti al comportamento predefinito: nei form complessi, un <button> senza type può creare bug difficili da individuare.
• Evita azioni ambigue: ogni bottone deve comunicare chiaramente cosa farà. Un utente non dovrebbe chiedersi se il pulsante invia, salva o cancella.
• Progetta pensando all’accessibilità: il testo del bottone deve essere chiaro e descrittivo, per aiutare sia gli utenti sia i lettori di schermo.

Una buona regola pratica è questa: se il bottone è solo testo semplice per inviare un form, <input type="submit"> va benissimo. Se invece vuoi più controllo sul contenuto o sul comportamento, usa <button>.

Riepilogo

• <button> è più flessibile e adatto a scenari complessi.
• <input type="submit"> è più semplice e immediato.
• Per un form con più azioni, <button type="button"> è fondamentale per evitare invii accidentali.
• Se vuoi personalizzazione avanzata o contenuto interno ricco, preferisci <button>.
• Se vuoi un pulsante essenziale e standard, <input type="submit"> è una scelta pulita.

In sintesi, non esiste un elemento “migliore” in assoluto: la scelta dipende dal contesto. Nei form moderni, però, <button> offre più libertà progettuale, mentre <input type="submit"> resta una soluzione veloce e affidabile per i casi più semplici.

Approfondisci con risorse ufficiali

• MDN Web Docs — <button>: documentazione completa su attributi, comportamento e accessibilità.
• MDN Web Docs — <input type="submit">: riferimento pratico per l’uso del submit input.
• HTML Living Standard: specifica ufficiale del linguaggio HTML e del comportamento dei form.
• WAI-ARIA Authoring Practices: utile per capire come progettare controlli accessibili e ben etichettati.

Se vuoi, nel prossimo passo posso scrivere anche un tutorial dedicato a come gestire più bottoni nello stesso form con JavaScript, mostrando come distinguere “Salva”, “Invia” e “Annulla” in modo pulito e professionale.