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

Introduzione

Quando si lavora con i form HTML, i bottoni sembrano tutti uguali: li clicchi e succede qualcosa. In realtà, <button> e <input type="submit"> hanno differenze importanti, soprattutto quando vuoi costruire interfacce più pulite, accessibili e facili da mantenere.

In questo tutorial vediamo un sotto-argomento molto pratico: come scegliere il bottone giusto in base al contenuto del pulsante, alla semantica e alla personalizzazione dell’etichetta. È un aspetto spesso trascurato, ma fondamentale in progetti reali. Per esempio, se devi mostrare un bottone con testo lungo, icone o elementi HTML interni, <button> è quasi sempre la scelta migliore. Se invece ti serve un controllo semplice e immediato per inviare un form, <input type="submit"> può essere sufficiente.

Capire questa differenza ti aiuta a evitare soluzioni rigide, a scrivere codice più leggibile e a gestire meglio l’esperienza utente.

Codice completo

Nel seguente esempio trovi un form con due pulsanti: uno realizzato con <button> e uno con <input type="submit">. Noterai che il primo permette un contenuto più ricco, mentre il secondo è più essenziale.

<form action="/iscrizione" method="post">
  <h3>Iscrizione alla newsletter</h3>

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

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

  <p>
    <strong>Scegli il tipo di bottone:</strong>
  </p>

  <!-- Bottone flessibile: può contenere testo, icone e markup HTML -->
  <button type="submit">
    <span>Iscriviti ora</span>
    <span aria-hidden="true"> →</span>
  </button>

  <!-- Bottone semplice: valore testuale fisso, nessun contenuto interno HTML -->
  <input type="submit" value="Invia modulo">
</form>

Spiegazione

La differenza più evidente è questa:

• <input type="submit"> è un elemento vuoto: non può contenere testo HTML interno, icone o altri elementi.
• <button> è un elemento contenitore: può includere testo, <span>, icone e persino strutture più articolate.

1. <input type="submit">: semplice e diretto

Questo elemento nasce per un compito preciso: inviare il form. Il testo visibile sul bottone viene definito tramite l’attributo value.

È una soluzione molto compatta e spesso utile quando vuoi un’interfaccia essenziale. Tuttavia, ha limiti evidenti:

• non puoi aggiungere icone dentro il bottone;
• non puoi usare markup interno per creare layout complessi;
• la personalizzazione del contenuto è più rigida.

2. <button>: più flessibile e moderno

Il tag <button> è più versatile. Può essere usato per inviare il form, ma anche per azioni diverse, purché il suo type sia impostato correttamente. Se vuoi che invii il form, devi scrivere esplicitamente type="submit".

Nel codice di esempio, il bottone contiene due <span>: uno con il testo e uno con una freccia decorativa. Questo è possibile solo perché <button> accetta contenuto interno.

3. Perché questa differenza è importante nei progetti reali

Immagina di progettare una dashboard o un form di checkout. Spesso hai bisogno di bottoni con:

• testi dinamici, come “Paga ora” o “Continua con PayPal”;
• icone accanto al testo;
• stati visivi diversi, come loading o conferma;
• contenuti accessibili più precisi.

In questi casi, <button> è molto più comodo. Al contrario, se devi creare un form molto semplice, magari in una pagina di login minimale, <input type="submit"> può andare benissimo.

4. Attenzione al tipo di <button>

Un dettaglio tecnico importante: dentro un form, un <button> senza attributo type si comporta spesso come un submit button. Questo può creare bug inattesi, soprattutto se usi il bottone per aprire un menu, resettare un campo o mostrare un popup.

Per questo è una buona abitudine scrivere sempre il tipo in modo esplicito:

• type="submit" per inviare il form;
• type="button" per azioni JavaScript o interazioni non legate all’invio;
• type="reset" solo se vuoi davvero azzerare i campi del form.

Best practice

• Usa <button> quando ti serve flessibilità: testo ricco, icone, badge, layout personalizzati.
• Usa <input type="submit"> quando vuoi semplicità: un pulsante chiaro, essenziale e immediato.
• Imposta sempre type nei <button> per evitare comportamenti involontari.
• Scrivi etichette chiare: il testo del bottone deve far capire cosa succede dopo il clic.
• Non usare solo icone se il significato non è ovvio: meglio affiancare sempre una label testuale.
• Preferisci la semantica corretta: un bottone di invio deve essere un submit, non un elemento generico stilizzato.
• Testa il comportamento con tastiera: sia <button> sia <input type="submit"> devono essere raggiungibili e attivabili correttamente.

Riepilogo

La differenza tra <button> e <input type="submit"> non riguarda solo la sintassi, ma soprattutto flessibilità, semantica e manutenzione.

• <input type="submit"> è perfetto per bottoni semplici e immediati.
• <button> è ideale quando vuoi più controllo sul contenuto e sul design.
• Se il bottone deve inviare un form, ricorda di usare type="submit".
• Se il bottone serve per altre azioni, usa type="button".

In pratica, la scelta migliore dipende dal contesto: per interfacce semplici puoi usare <input type="submit">, ma nei progetti moderni <button> è spesso la soluzione più robusta e versatile.

Approfondisci con risorse ufficiali

• MDN Web Docs - <button>: documentazione completa su attributi, comportamento e accessibilità.
• MDN Web Docs - <input>: riferimento ufficiale per i diversi tipi di input, incluso submit.
• HTML Living Standard: specifica ufficiale del comportamento degli elementi di form.
• WAI-ARIA Authoring Practices: utile per capire come progettare bottoni accessibili e coerenti.