Getting Started with HTML Form Events

HTML forms are a fundamental part of web development, and understanding how to work with form events is crucial for building dynamic and interactive user interfaces. In this blog post, we'll explore the various types of form events provided by HTML forms and form control inputs.

Input Event

The input event is triggered whenever the value of an <input> element changes. This includes typing a new character, deleting a character, or pasting text into the field.

Our example will use a simple text input to get updates from the user input.

<label for="my-input">Text:</label>
<input id="my-input" type="text" /> 

<script type="module">
  const input = document.querySelector('input[type=text]');
  input.addEventListener('input', (event) => {
    console.log(event, input.value);
  });
</script>

In this example, we're using the querySelector method to select the <input> element with a type attribute set to "text". We then add an event listener for the input event, which is triggered whenever the value of the input field changes.

Change Event

The change event is similar to the input event, but it's only triggered when the user commits a change to the input field (e.g., by pressing Enter or clicking away or "bluring" from the field).

Here's an example of how to use the change event:

<label for="my-input">Text:</label>
<input id="my-input" type="text" /> 

<script type="module">
  const input = document.querySelector('input[type=text]');
  input.addEventListener('change', (event) => {
    console.log(event, input.value);
  });
</script>

In this example, we're using the same HTML code as before, but this time we're listening for the change event instead of the input event.

Selection Inputs

Some HTML inputs such as the select or input type radio will trigger both input and change events at the same time. These inputs don't emit input the same way as text input since the value selected has no indeterminate state as the user is typing.

<label for="my-select">Select:</label>
<select id="my-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<script type="module">
  const select = document.querySelector('select');
  select.addEventListener('input', (event) => {
    console.log(event, select.value);
  });

  select.addEventListener('change', (event) => {
    console.log(event, select.value);
  });
</script>

When the user selects a option both the input and change events will fire simultaneously.

Form Submit

The <form> element can also trigger events when its contents change. Forms can trigger a submit event when a submit button is clicked or the user submits via the enter key.

<form>
  <label for="my-input">Text:</label>
  <input id="my-input" type="text" /> 

  <label for="my-select">Select:</label>
  <select id="my-select">
    ...
  </select>

  <button type="button">Cancel</button>
  <button>Submit</button>
</form>

By default buttons in a form element will trigger a submit event. In cases where you want the button to not trigger the submit you must add type="button".

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log(event);
});

The submit event default behavior is to trigger a post back to the host server. In cases where you want to handle the event yourself via JavaScript use event.preventDefault().

Native events "bubble" meaning we can listen to events of child elements from a parent element. This can be helpful for when you want to capture input or change events of multiple inputs within a form.

const form = document.querySelector('form');
form.addEventListener('input', (event) => console.log(event));
form.addEventListener('change', (event) => console.log(event));
form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log(event);
});

In this example, we're using the same HTML code as before, but this time we're listening for input, change, and submit events.

That's it! We've explored the various types of input, selection, and form events that you can use in your HTML forms. By understanding how to work with these events, you'll be able to build more dynamic and interactive user interfaces for your web applications. Check out the full working example below.