# Form Events

Form controls send their own events, for the moments a visitor types, changes a value, moves between fields or sends the form, so you can pick the one that fires exactly when you need it.

Apprentice · JavaScript · Updated October 29, 2026

## After this lesson you can

- Choose the form event that fires at the moment you need it, from change, input, keydown, keyup, focus, blur and submit

## Key takeaways

- input fires with every change to a text box's value, as it happens. change fires on a text box when the visitor leaves it (or presses Enter) after changing it.
- For a checkbox or radio button, change fires as soon as it's checked or unchecked.
- keydown fires when a key is pressed, again and again while it's held, and keyup when it's let go.
- focus fires when a control is entered, and blur when it's left.
- submit fires on the form when it's sent, by its submit button or by pressing Enter in a text box.

Think of a sign-up form that counts the characters as you type, warns you the moment you leave the email box empty, and only sends once everything is filled in. Each of those reactions hangs on a different moment, and form controls, such as text boxes, checkboxes, dropdowns and the form itself, send an event for each one: when a visitor types, changes a value, moves from one field to the next, or sends the form.

## change

The `change` event fires when the value of an input has changed. On a text box, `change` doesn't fire while the visitor types: it waits until they leave the box (or press Enter) after changing it.

For a checkbox or radio button the `change` event fires immediately when the checked state changes. A dropdown (a `<select>`) fires `change` as soon as a new option is chosen.

## input

The `input` event fires every time the value of a text box changes, as it happens: each letter typed, deleted or pasted. When a key is typed, `keydown` fires first, then `input` as the letter lands in the box, then `keyup` as the key is let go. Use `input` when the page should keep up with the typing, such as a character count under a `<textarea>` (a text box with room for several lines):

```html
<textarea id="review"></textarea>
<p id="count">0 characters</p>
```

```javascript
const review = document.getElementById("review");
const count = document.getElementById("count");

review.addEventListener("input", () => {
    count.textContent = review.value.length + " characters";
});
```

## keyup

The `keyup` event fires after the keyboard key is released.

## keydown

The `keydown` event fires immediately when a keyboard key is pressed. If a key is held down this event fires repeatedly, the way a held key keeps typing the same letter.

`keydown` and `keyup` aren't only for forms: they fire on whatever has focus, and bubble up to the `document`. That's why a keyboard shortcut for the whole page, such as Escape to close a menu, listens on `document`.

## focus

The `focus` event fires when a form control receives focus: the visitor clicks into it or reaches it with Tab, and it's now the one the keyboard types into. It's the moment to show a tip, such as *At least 8 characters*.

## blur

`blur` is the opposite of `focus`: it fires when the visitor leaves the control, by pressing Tab or by clicking somewhere else. (The name comes from a camera: the control goes out of focus.) It's the moment to check what they typed, such as an email box left empty.

## submit

A form's `submit` event fires on the form when it is sent: when its submit button is pressed, or when the visitor presses Enter in one of its text boxes. Listen for `submit` on the form rather than `click` on the button, so both ways are caught.

## Check yourself

2 questions to try on the lesson page.

## So what

Picking the right event is half the work: the same code feels instant on `input`, calm on `change`, and complete on `submit`.

## Key terms

- [change Event](https://www.ask-codey.com/glossary/change-event)
- [submit Event](https://www.ask-codey.com/glossary/submit-event)

Source: https://www.ask-codey.com/lessons/common-events-form-events