Form Events

JavaScript form events allow us to respond when users interact with HTML forms and their input controls.

What are Form Events?

Form events are triggered when users interact with HTML forms and their input controls.

Common form-related events include input, change, submit, reset, focus, and blur.

HTML Form Example

Name

Email

Course

Submit

Example of an HTML form containing text fields, selection controls, checkboxes and a submit button. Click the image to open the online reference.

Form Event Flow

Common Form Events

input occurs when the value of an input field changes.

change occurs when a form control finishes changing its value.

submit occurs when a form is submitted.

focus occurs when an input receives focus.

blur occurs when an input loses focus.

Example 1: Input Event

The input event can be used to detect changes made by a user in a form field.

const event = {
    type: "input",
    field: "Name",
    value: "Rahul"
};

console.log("Event Type:", event.type);
console.log("Field:", event.field);
console.log("Value:", event.value);

Example 2: Change Event

The change event is commonly used when the value of a form control changes.

const event = {
    type: "change",
    field: "Course",
    value: "JavaScript"
};

console.log("Event Type:", event.type);
console.log("Field:", event.field);
console.log("Value:", event.value);

Example 3: Submit Event

The submit event occurs when a user submits a form.

const event = {
    type: "submit",
    form: "Registration Form",
    status: "Submitted"
};

console.log("Event Type:", event.type);
console.log("Form:", event.form);
console.log("Status:", event.status);

Example 4: Focus and Blur

The focus event occurs when an input becomes active, while blur occurs when the input loses focus.

const focusEvent = {
    type: "focus",
    field: "Email"
};

const blurEvent = {
    type: "blur",
    field: "Email"
};

console.log("Focus Event:", focusEvent.type);
console.log("Field:", focusEvent.field);

console.log("Blur Event:", blurEvent.type);
console.log("Field:", blurEvent.field);

Example 🌍🤓

Form events are commonly used in registration, login, search, feedback, and admission forms.

const registration = {
    name: "Rahul",
    course: "JavaScript",
    event: "submit",
    status: "Registration Successful"
};

console.log("Student:", registration.name);
console.log("Course:", registration.course);
console.log("Event:", registration.event);
console.log("Status:", registration.status);