<input type="button">

Gli elementi <input> di tipo button sono resi come semplici pulsanti, che possono essere programmati per controllare la funzionalità personalizzata in qualsiasi punto di una pagina Web come richiesto quando viene assegnata una funzione di gestione dell'evento (in genere per l'evento click).

Nota: sebbene gli elementi <input> di tipo button siano ancora HTML perfettamente validi, l'elemento più recente <button> è ora il modo preferito per creare pulsanti. Dato che in <button> il testo di un'etichetta è inserito tra i tag di apertura e chiusura, puoi includere HTML nell'etichetta, anche immagini.

Valore

Pulsante con valore

Un attributo value di elementi <input type="button"> contiene una stringa che viene utilizzata come etichetta del pulsante.

<input type="button" value="Cliccami">

Pulsante senza valore

<input type="button">

Utilizzo dei pulsanti

Gli elementi <input type="button"> non hanno un comportamento predefinito (i loro cugini <input type="submit"> e <input type="reset"> vengono utilizzati rispettivamente per inviare e reimpostare i moduli). Per fare in modo che i pulsanti facciano qualsiasi cosa, devi scrivere codice JavaScript per fare il lavoro.

Un semplice pulsante

Inizieremo creando un semplice pulsante con un gestore di eventi click che avvia la nostra macchina (beh, alterna valueil pulsante e il contenuto del testo del paragrafo seguente):

<form>
  <input type="button" value="Avvia la macchina">
</form>
<p>La macchina è ferma</p>

const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEvetListener('click', updateButton);

function updateButton() {
  if (button.value === 'Avvia macchina') {
          button.value = 'Ferma macchina';
          paragraph.textContent = 'La macchina è stata avviata!';
  } else {
          button.value = 'Avvia macchina';
          paragraph.textContent = 'La macchina è stata fermata.';
  }
}

Disabilitazione e abilitazione di un pulsante

Per disabilitare un pulsante, specifica l'attributo globale disabled su di esso, in questo modo:

<input type="button" value="Disabilitami" disabled>

Convalida

I pulsanti non partecipano alla convalida dei vincoli; non hanno alcun valore reale da vincolare.