<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).

Gli attributi di questo elemento includono gli attributi globali.

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.

Guaarda anche

• <input>
• <button>

Liste utili

• Attributi
• Attributi globali
• Elementi