Il tag <BUTTON> in Html

Il tag button è un elemento del linguaggio HTML che ti consente di creare un pulsante cliccabile all'interno di una pagina web.

<button> </button>

Tra il tag di apertura <button> e il tag di chiusura </button> puoi scrivere il testo che vuoi visualizzare sul pulsante.

<button>Testo del pulsante</button>

Quando il browser incontra questo tag, costruisce un elemento cliccabile (pulsante) inserendo il testo come etichetta.

Ecco un esempio di pulsante realizzato con il tag <button>.

L'aspetto del pulsante cambia a seconda del browser che stai utilizzando e puoi comunque personalizzarlo tramite i fogli di stile css.

A cosa serve? Il tab <button> ha diverse applicazioni pratiche. Ad esempio, puoi usarlo per inviare un form, attivare una funzione JavaScript o navigare verso un'altra pagina web.

Gli attributi del tag <button>

Il tag <button> ha diversi attributi che ti permettono di personalizzare il comportamento del pulsante.

type
L'attributo "type" ti consente di scegliere il tipo di pulsante che vuoi creare.
- type=submit
  Crea il pulsante di invio dei dati all'interno di una form
  <button type="submit">Invia</button>
- type=reset
  Crea il pulsante di azzeramento o di ripristino dei dati ai valori iniziali in una form. In pratica, cancella i dati digitati dall'utente nella form.
  <button type="reset">Annulla</button>
- type=button
  Crea un pulsante generico che può trovarsi anche al di fuori di una form. Ad esempio, puoi associare questo pulsante all'esecuzione di uno script tramite gli eventi onclick e/o onmouseover.
  <button type="button">Clicca qui</button>
onclick
L'attributo "onclick" ti permette di eseguire una funzione JavaScript quando l'utente clicca sul pulsante
<button onclick="alert('Hai cliccato il pulsante!')">Clicca qui</button>
Quando l'utente clicca sul pulsante viene visualizzato un messaggio di alert con il testo "Hai cliccato il pulsante!".
disabled
L'attributo "disabled" disabilita il pulsante.
<button disabled>Pulsante disabilitato</button>
In questo caso il pulsante non può essere cliccato dall'utente e l'aspetto del pulsante cambia per indicare che è inattivo.

Questi sono solo alcuni tra i possibili utilizzi del tag button.

In generale, puoi inserire il tag <button> nella sezione <body> del documento HTML.

Ecco un esempio pratico.

<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<form>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<button type="submit">Invia</button>
</form>
...
</body>
</html>

In questo caso il tag button è utilizzato per inviare la form compilata dall'utente.

Il risultato finale è il seguente

In questo tutorial ti ho spiegato le principali funzionalità del tag <button> in un documento HTML.