Guida HTML interattiva: Pulsante (button)

Q: Come si crea un pulsante in HTML?

Scrivi Click me . Il testo tra i tag è l'etichetta. Aggiungi un listener click in JavaScript perché faccia qualcosa, oppure mettilo dentro un con type="submit" per inviare il form.

Q: Qual è il tipo predefinito di un pulsante HTML?

submit. Un senza attributo type dentro un form invia quel form quando viene cliccato, ed è per questo che un semplice pulsante in un form può ricaricare la pagina. Scrivi type="button" per ogni pulsante che invece esegue JavaScript.

Q: Che differenza c'è tra button e input type=submit?

Entrambi inviano un form. può contenere HTML (un'icona, del testo in grassetto) tra i suoi tag, mentre prende l'etichetta dall'attributo value e può contenere solo testo semplice. Quasi tutto il codice moderno usa .

Q: Come disattivo un pulsante in HTML?

Aggiungi l'attributo disabled: Save . Un pulsante disattivato non si può cliccare né raggiungere con il focus, e il suo nome e valore non vengono inviati con il form. Togli l'attributo (btn.disabled = false in JavaScript) per riattivarlo.

Q: Come faccio a far andare un pulsante HTML a un'altra pagina?

Usa un link con lo stile di un pulsante: See pricing . Un serve per le azioni sulla pagina attuale. Mettere un pulsante dentro è HTML non valido.

Q: Perché il mio pulsante ricarica la pagina?

È dentro un e non ha type, quindi è un pulsante di invio e il browser invia il form e carica la risposta. Aggiungigli type="button", oppure chiama event.preventDefault() in un listener submit se gestisci il form con JavaScript.

Come creare un pulsante in HTML

Un pulsante è l'elemento <button>. Il contenuto tra i tag è quello che l'utente vede, e type="button" dice che esegue il tuo script invece di inviare un form. Cliccalo nell'anteprima:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button</title>
</head>
<body>
  <button type="button" id="like">Like</button>
  <p>Likes: <span id="count">0</span></p>

  <script>
    const count = document.querySelector('#count');
    document.querySelector('#like').addEventListener('click', () => {
      count.textContent = Number(count.textContent) + 1;
    });
  </script>
</body>
</html>

Questo è tutto quello che serve a un pulsante funzionante: un'etichetta, un type e qualcosa che ascolta il click. Il browser lo rende raggiungibile con la tastiera e lo attiva con Invio o con la barra spaziatrice, quindi chi usa la tastiera lo ha gratis. Un <div> con un gestore di clic non ha niente di tutto questo.

Potresti vedere anche onclick="..." scritto direttamente nel tag. Funziona, ma addEventListener tiene lo script fuori dal markup e permette a più listener di condividere un pulsante.

I tre tipi di pulsante

L'attributo type decide cosa fa un pulsante quando viene premuto.

`type`	Cosa fa	Usalo per
`submit`	Invia il form a cui appartiene. È il valore predefinito.	L'azione principale di un form
`button`	Niente da solo; decide il tuo JavaScript	Interruttori, finestre di dialogo, contatori, qualsiasi cosa con uno script
`reset`	Riporta ogni campo del form al suo valore iniziale	Raramente; gli utenti lo premono per sbaglio

Scrivi qualcosa, poi prova ogni pulsante. L'anteprima non esce dalla pagina quando il form viene inviato; mostra i dati che il form avrebbe inviato.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button types</title>
</head>
<body>
  <form>
    <label>Name <input name="name" value="Ada"></label>
    <p>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button" id="upper">Uppercase</button>
    </p>
  </form>

  <script>
    document.querySelector('#upper').addEventListener('click', () => {
      const field = document.querySelector('input[name="name"]');
      field.value = field.value.toUpperCase();
    });
  </script>
</body>
</html>

Reset ripristina il valore scritto nell'HTML (Ada), non un campo vuoto. E se cancelli type="button" da Uppercase, diventa un pulsante di invio: mette il nome in maiuscolo e poi invia il form.

Pulsante submit in HTML: inviare un nome e un valore

Un pulsante di invio può avere un suo name e un suo value. Vengono inviati con il form solo quando è quel pulsante ad averlo inviato, quindi due pulsanti possono condividere un form e dire al server quale azione è stata scelta:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit buttons</title>
</head>
<body>
  <form>
    <label>Title <input name="title" value="My first post" required></label>
    <p>
      <button type="submit" name="action" value="draft">Save draft</button>
      <button type="submit" name="action" value="publish">Publish</button>
    </p>
  </form>
</body>
</html>

Premi Publish e il form invia title=My first post e action=publish. Svuota il titolo e premi uno dei due pulsanti: required blocca l'invio e il browser mostra il suo messaggio. Anche premere Invio dentro il campo di testo invia il form, e il browser lo tratta come una pressione del primo pulsante di invio, quindi invia action=draft.

I pulsanti di invio accettano anche attributi che sostituiscono quelli del form solo per quel pulsante: formaction (un URL diverso), formmethod, formtarget e formnovalidate, che salta la validazione. formnovalidate è la scelta abituale per un pulsante "Salva bozza" che deve funzionare anche quando i campi obbligatori sono ancora vuoti.

Un pulsante messo fuori dal suo form può comunque inviarlo con l'attributo form, che prende l'id del form: <button type="submit" form="signup">Sign up</button>.

Pulsanti disattivati

L'attributo disabled spegne un pulsante. Un pulsante disattivato ignora i clic, viene saltato dal Tab e non viene inviato con il form. I browser lo mostrano anche in grigio. Uno schema comune è tenere disattivato il pulsante di invio finché non si verifica una condizione:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled button</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="agree" name="terms" value="accepted">
      I accept the terms
    </label>
    <p><button type="submit" id="go" disabled>Create account</button></p>
  </form>

  <script>
    const agree = document.querySelector('#agree');
    const go = document.querySelector('#go');
    agree.addEventListener('change', () => {
      go.disabled = !agree.checked;
    });
  </script>
</body>
</html>

In JavaScript, button.disabled è una proprietà booleana: impostala a true o false. In HTML conta la presenza dell'attributo, quindi disabled="false" disattiva comunque il pulsante.

Un pulsante disattivato non spiega perché lo è, e chi si muove con Tab usando tastiera o lettore di schermo non ci arriva mai. Quando il motivo non è ovvio, scrivilo in un testo accanto al pulsante, oppure lascia il pulsante attivo e mostra un messaggio di errore quando viene premuto.

Dare stile a un pulsante con il CSS

I browser disegnano i pulsanti con font, bordo e sfondo propri. Impostando poche proprietà sostituisci tutto questo. Mantieni uno stile di focus visibile: è il modo in cui chi usa la tastiera vede dove si trova.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      font: inherit;
      padding: 10px 18px;
      border: 2px solid #2563eb;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }
    .btn:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-secondary { background: #fff; color: #2563eb; }
    .btn-secondary:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <button type="button" class="btn">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn" disabled>Disabled</button>
</body>
</html>

A cosa serve ogni regola:

font: inherit fa usare al pulsante il font della pagina. Senza, i pulsanti usano il font per i form del browser, più piccolo (13.33px in Chrome e Firefox).
cursor: pointer mostra il cursore a manina. Di default i pulsanti mostrano la freccia normale.
:hover, :active e :focus-visible danno stile agli stati di puntatore, pressione e tastiera. :focus-visible mostra il contorno per il focus da tastiera ma non dopo un clic del mouse, quindi non devi togliere outline per evitarlo.
:disabled seleziona i pulsanti con l'attributo disabled.

Premi Tab nell'anteprima per vedere il contorno ambra spostarsi tra i primi due pulsanti. Quello disattivato viene saltato. (Su Mac, Safari e Firefox arrivano con Tab ai pulsanti solo quando la navigazione da tastiera è attiva nelle impostazioni di sistema; in Safari, Opzione+Tab funziona anche senza.) Per l'elenco completo degli stati, vedi hover in CSS.

Pulsanti con icone

Dato che <button> può contenere HTML, un'icona va dentro accanto al testo. Un pulsante con solo l'icona non ha testo da far annunciare ai lettori di schermo, quindi dagli un aria-label:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Icon buttons</title>
  <style>
    button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      padding: 8px 12px;
      border: 1px solid #111827;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button type="button">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M2 8h12M8 2v12" stroke="#16a34a" stroke-width="2"/>
    </svg>
    Add item
  </button>

  <button type="button" aria-label="Delete">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3 3l10 10M13 3L3 13" stroke="#dc2626" stroke-width="2"/>
    </svg>
  </button>
</body>
</html>

aria-hidden="true" sull'SVG lo tiene fuori dall'albero di accessibilità, così il primo pulsante viene annunciato come "Add item, pulsante" e il secondo come "Delete, pulsante".

button o input type="submit"

<input type="submit"> è il modo più vecchio di scrivere un pulsante di invio. Entrambi inviano il form allo stesso modo; la differenza è in cosa possono contenere.

<input type="submit" value="Send">   <!-- label comes from value, text only -->
<button type="submit">Send</button>  <!-- label is the content, HTML allowed -->

	`<button>`	`<input type="submit">`
Etichetta	Contenuto tra i tag	L'attributo `value`
Può contenere icone o markup	Sì	No
Tag di chiusura	Obbligatorio	Nessuno (elemento vuoto)
Tipo predefinito	`submit`	Sempre submit

Usa <button>. L'unico motivo per tenere <input type="submit"> è del CSS o JavaScript esistente che lo seleziona. Esistono anche <input type="button"> e <input type="reset">, la stessa idea per gli altri due tipi.

Pulsante o link?

Un pulsante fa qualcosa nella pagina attuale: invia, apre, attiva o disattiva, elimina. Un link va a un altro URL. Se cliccandolo cambia la barra degli indirizzi, deve essere un <a href>, con lo stile di un pulsante se il design lo richiede. Questo schema, e perché un pulsante dentro un link non è valido, è spiegato in pulsante con link in HTML.

Accessibilità

Usa un vero <button>. Si raggiunge con il focus, funziona con Invio e barra spaziatrice e viene annunciato come pulsante. Ricostruire tutto questo su un <div> richiede role, tabindex e gestori dei tasti, e di solito resta comunque incompleto.
Ogni pulsante ha bisogno di un nome: il suo testo, o aria-label quando ha solo un'icona.
Mantieni uno stile di focus visibile. outline: none senza un sostituto lascia chi usa la tastiera senza orientamento.
Rendi l'area cliccabile abbastanza grande. WCAG 2.2 chiede almeno 24 per 24 pixel CSS; un padding come nell'esempio con stile qui sopra dà circa 40 pixel di altezza.
Per un interruttore, aggiungi aria-pressed="true" o "false" e aggiornalo quando lo stato cambia.

Errori comuni

Un pulsante in un form senza type. Invia il form. Scrivi type="button" su ogni pulsante che non deve inviare.
Mettere un pulsante dentro un link, <a href="/x"><button>Go</button></a>. È HTML non valido e si comporta in modo diverso nei vari browser. Usa un solo elemento: un link con lo stile di un pulsante.
Usare <div onclick> come pulsante. Non si raggiunge con la tastiera.
Togliere il contorno di focus senza aggiungere uno stile :focus-visible.
Scrivere disabled="false" e aspettarsi un pulsante attivo. Togli l'attributo.
Dimenticare font: inherit e chiedersi perché i pulsanti usano un font diverso dal resto della pagina.

Domande frequenti

Come si crea un pulsante in HTML?

Scrivi <button type="button">Click me</button>. Il testo tra i tag è l'etichetta. Aggiungi un listener click in JavaScript perché faccia qualcosa, oppure mettilo dentro un <form> con type="submit" per inviare il form.

Qual è il tipo predefinito di un pulsante HTML?

submit. Un <button> senza attributo type dentro un form invia quel form quando viene cliccato, ed è per questo che un semplice pulsante in un form può ricaricare la pagina. Scrivi type="button" per ogni pulsante che invece esegue JavaScript.

Che differenza c'è tra button e input type=submit?

Entrambi inviano un form. <button> può contenere HTML (un'icona, del testo in grassetto) tra i suoi tag, mentre <input type="submit"> prende l'etichetta dall'attributo value e può contenere solo testo semplice. Quasi tutto il codice moderno usa <button>.

Come disattivo un pulsante in HTML?

Aggiungi l'attributo disabled: <button disabled>Save</button>. Un pulsante disattivato non si può cliccare né raggiungere con il focus, e il suo nome e valore non vengono inviati con il form. Togli l'attributo (btn.disabled = false in JavaScript) per riattivarlo.

Come faccio a far andare un pulsante HTML a un'altra pagina?

Usa un link con lo stile di un pulsante: <a href="/pricing" class="btn">See pricing</a>. Un <button> serve per le azioni sulla pagina attuale. Mettere un pulsante dentro <a> è HTML non valido.

Perché il mio pulsante ricarica la pagina?

È dentro un <form> e non ha type, quindi è un pulsante di invio e il browser invia il form e carica la risposta. Aggiungigli type="button", oppure chiama event.preventDefault() in un listener submit se gestisci il form con JavaScript.

Concetti correlati