<input type="button">

Button type <input> elements are rendered as simple buttons, which can be programmed to control custom functionality anywhere on a web page as required when an event handling function is assigned (typically for the click event ).

Note: While <input> elements of type button are still perfectly valid HTML, the newer <button> element is now the preferred way to create buttons. Since in <button> the text of a label is inserted between the opening and closing tags, you can include HTML in the label, even images.

Value

Button with value

A value attribute of <input type="button"> elements contains a string that is used as the label of the button.

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

Button without value

<input type="button">

Buttons usage

The <input type="button"> elements have no default behavior (their cousins <input type="submit"> and <input type="reset"> are used to submit and reset forms respectively. To make buttons do anything, you have to write JavaScript code to do the job.

A simple button

We'll start by creating a simple button with a click event handler that starts our machine (well, it toggles value between the button and the text content of the following paragraph):

<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.';
  }
}

Disabling and enabling a button

To disable a button, specify the global disabled attribute on it, like this:

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

Validation

Buttons do not participate in constraint validation; they have no real value to bind.