Tag HTML <button>
Il tag HTML <button> crea pulsanti cliccabili. Scopri l'attributo type, lo stile, lo stato disabilitato e l'accessibilità con esempi.
Il tag <button> crea un pulsante cliccabile nella pagina web. A differenza di un pulsante costruito con il tag <input>, un <button> può contenere contenuto ricco — testo, immagini o altro HTML inline — tra i suoi tag di apertura e chiusura. Questo lo rende l'elemento preferito per la maggior parte dei pulsanti oggi, perché è più facile da stilizzare e permette di combinare un'icona con un'etichetta.
Questa pagina tratta la sintassi di <button>, il fondamentale attributo type (e il bug che deriva dal dimenticarlo all'interno di un form), lo stile, lo stato disabled, l'accessibilità e il confronto tra <button> e <input>.
In passato, alcuni sviluppatori usavano <input type="button"> al posto di <button> perché versioni molto vecchie di Internet Explorer renderizzavano <button> in modo incoerente. Quel problema è ormai scomparso — nei browser moderni <button> è la scelta raccomandata.
Sintassi
Il tag <button> viene usato in coppia. Il contenuto viene scritto tra il tag di apertura (<button>) e quello di chiusura (</button>).
Esempio del tag HTML <button>:
Esempio del tag HTML <button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Here will be our button</h1>
<button type="button">Click</button>
</body>
</html>L'attributo type
L'attributo type determina cosa fa un pulsante. Esistono tre valori:
submit— invia il form genitore.reset— reimposta tutti i controlli del form ai loro valori iniziali.button— non fa nulla da solo; il comportamento viene collegato tramite JavaScript.
L'errore più comune: all'interno di un <form>, un <button> senza type ha come valore predefinito type="submit". Quindi un pulsante pensato come semplice azione invierà il form (spesso ricaricando la pagina) nel momento in cui viene cliccato. Impostare sempre type="button" esplicitamente per i pulsanti non-submit all'interno di un form.
Esempio di submit, reset e button:
Esempio dei tre tipi di pulsante
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/submit">
<label>Name: <input type="text" name="name"></label>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Just a button!')">Say hi</button>
</form>
</body>
</html>Submit invia il form, Reset svuota il campo di testo, mentre Say hi esegue solo il suo JavaScript senza toccare il form.
Utilizzo degli stili CSS
Puoi applicare stili CSS al tag <button> per modificarne l'aspetto, le dimensioni, il colore, il font del testo e così via.
Esempio del tag <button> con stili CSS:
Esempio del tag HTML <button> con proprietà CSS di colore e font
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red-text {
color: red;
}
.big-text {
font: bold 14px Arial;
}
</style>
</head>
<body>
Ordinary button
<button type="button">Add to the recycle bin</button>
<hr />
Button with red text
<button type="button" class="red-text"><b>HTML Book</b></button>
<hr />
Button with increased font size
<button type="button" class="big-text">Download the book</button>
</body>
</html>Risultato
Lo stato disabled
Un pulsante con l'attributo disabled non può essere cliccato né ricevere il focus, e non attiverà i propri gestori di eventi né invierà un form. I browser lo mostrano in grigio per indicare agli utenti che è inattivo. Questo è utile quando un'azione non è disponibile — ad esempio, fino a quando un form non è compilato correttamente.
Esempio di pulsante disabilitato
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Active button</button>
<button type="button" disabled>Disabled button</button>
</body>
</html>Attributi
Il tag <button> non ha attributi obbligatori; tuttavia, raccomandiamo di impostare sempre type="button" quando il tag viene usato come pulsante ordinario (non-submit), perché all'interno di un form un type non impostato ha come valore predefinito submit.
| Attributi | Valore | Descrizione |
|---|---|---|
autofocus | autofocus | Specifica che il pulsante deve ricevere il focus dopo il caricamento della pagina. |
disabled | disabled | Disattiva il pulsante. (Usato quando il pulsante deve diventare attivo dopo aver eseguito un'azione.) |
form | form_id | Specifica uno o più form a cui appartiene il pulsante. Se il pulsante appartiene a più form, i loro identificatori (form_id) devono essere separati da spazi. |
formaction | URL | Definisce l'indirizzo a cui verranno inviati i dati del form dopo aver cliccato sul pulsante. (Usato solo per i pulsanti con l'attributo type="submit"). |
formenctype | application/x-www-form-urlencoded | Definisce come i dati del form devono essere codificati quando viene inviato. (Usato solo per type="submit"). Tutti i simboli vengono codificati prima dell'invio del form (valore predefinito). |
multipart/form-data | Codifica i dati come MIME multipart. | |
text/plain | Gli spazi vengono sostituiti dal segno "+", ma i simboli non vengono codificati. | |
formmethod | get | Definisce il metodo della richiesta HTTP che verrà utilizzato quando un form viene inviato (solo per type="submit"). Passa i dati del form nella barra degli indirizzi ("nome = valore"), che vengono aggiunti all'URL della pagina dopo il punto interrogativo e separati da una e commerciale (&). |
post | Il browser comunica con il server e invia i dati per l'elaborazione. | |
formnovalidate | formnovalidate | Specifica che i dati del form non devono essere validati all'invio (solo per type="submit"). |
formtarget | _blank | Specifica dove verrà mostrata la risposta dopo l'invio del form (solo per type="submit"). Apre la risposta in una nuova finestra. |
_self | Apre la risposta nella finestra corrente. | |
_parent | Apre la risposta nel frame genitore. | |
_top | Apre la risposta nella finestra a larghezza intera. | |
name | name | Definisce il nome del pulsante. |
type | button | Definisce un pulsante ordinario. |
reset | Pulsante che cancella i dati inseriti nel form. | |
submit | Pulsante per l'invio dei dati del form. | |
value | text | Definisce il valore del pulsante. |
Il tag <button> supporta anche gli Attributi Globali e gli Attributi Evento.
Accessibilità: assegnare un nome accessibile a un pulsante
Ogni pulsante necessita di un nome accessibile — il testo che uno screen reader annuncia. Per un normale pulsante di testo, il nome è semplicemente il testo tra i tag. Il problema si presenta con i pulsanti con sola icona, dove non è presente testo visibile.
Se l'unico contenuto del pulsante è un'immagine, fornisci all'<img> un attributo alt che descriva l'azione, non l'immagine. Il pulsante utilizza quindi quel testo come nome:
<button type="button">
<img src="search.png" alt="Search">
</button>Qui alt="Search" descrive cosa fa il pulsante, quindi uno screen reader annuncia "Search, button".
Se il pulsante non ha testo né un'immagine con alt — ad esempio un'icona disegnata con un icon font o un SVG inline — aggiungi un aria-label affinché il pulsante abbia comunque un nome:
<button type="button" aria-label="Close menu">
<span class="icon-close" aria-hidden="true"></span>
</button>L'aria-label è il nome accessibile del pulsante; aria-hidden="true" impedisce che l'icona decorativa venga annunciata. Da notare che aria-label e un <img alt> interno sono meccanismi separati — usa quello più adatto al markup, e non lasciare mai un pulsante con sola icona privo di uno dei due.
Come aggiungere un link a un pulsante?
Per creare un link cliccabile con l'aspetto di un pulsante, usa un elemento <a> stilizzato con CSS. Racchiudere un <button> all'interno di un <a> non è valido in HTML5. Ecco l'approccio corretto:
Come aggiungere un link a un pulsante?
<a href="https://example.com" class="button-link">
Button Label
</a>In questo esempio, l'elemento <a> è stilizzato per assomigliare a un pulsante. Quando l'utente ci clicca sopra, verrà portato all'URL collegato.
<button> vs. <input type="button">
È possibile creare un pulsante con <button> o con il tag <input> (type="button", type="submit" o type="reset"). Si comportano in modo simile, ma differiscono in ciò che possono contenere:
<button> | <input type="button"> / <input type="submit"> | |
|---|---|---|
| Fonte dell'etichetta | Contenuto tra i tag | L'attributo value (solo testo semplice) |
| Contenuto ricco | Sì — testo, immagini, icone, altro HTML inline | No — solo testo |
| Stilizzazione | Più semplice (pseudo-elementi, elementi annidati) | Più limitata |
| Tag di chiusura | Obbligatorio (</button>) | Nessuno — è un elemento void |
<!-- Rich content is possible -->
<button type="submit"><img src="check.png" alt=""> Save</button>
<!-- Text-only, set through value -->
<input type="submit" value="Save">Usa <button> quando vuoi un'icona, testo formattato o un controllo di stile più preciso; ricorri a <input> quando è sufficiente una semplice etichetta di testo.