Level: Intermediate | Player: 19_Event_Processing

Learning Objectives

Know the difference between input/change/submit events.
Uses HTML5 built-in verification (required, type, pattern).
Collect form data at once with FormData.
Input values are controlled and verified using JavaScript.
Learn the pattern of sending preventDefault to fetch, etc. when submitting.

1. input vs change vs submit

input: Whenever the value changes (every key during text input)
change: When the focus is lost and the value changes (text), or as soon as the selection changes (select/checkbox)
submit: When the form is submitted (form element)

form.addEventListener("submit", (e) => {
  e.preventDefault();
  //data processing
});

2. HTML5 validation

<input type="email" required minlength="3" />

The browser automatically verifies it. form.checkValidity(), can also be inspected in JavaScript with the validity object of the element.

3. FormData

const data = new FormData(form);
data.get("email");
for (const [k, v] of data) console.log(k, v);

FormData is also used for transfers including files.

4.controlled input

A pattern that JavaScript always holds the input value and reflects it on the screen.

input.addEventListener("input", (e) => {
  state.value = e.target.value.toUpperCase();
  input.value = state.value;
});

5. Submission pattern

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }
  const data = new FormData(form);
  //Transfer to fetch, which you will learn in the next lesson.
});

Core example

file	Contents covered
index.html	Example form
01_input_submit.js	input/submit event
02_validation.js	Utilizing HTML5 Verification
03_formdata.js	Using FormData
04_controlled.js	JavaScript value control

⚠️ Common Mistakes

preventDefault is forgotten in submit and the page is refreshed.
Access with e.value instead of e.target.value.
Confusion that the value of the checkbox is .checked and the text is .value.
When using FormData, the name property is omitted from input.
Domain verification, such as password matching, is intended to be processed only with HTML5.

❓ Frequently Asked Questions (FAQ)

Q1. Difference between checkValidity and reportValidity? A. checkValidity only checks, reportValidity displays a message to the user in case of failure.

Q2. Is controlled input always good? A. There may be a rendering cost for each key, so use it only when necessary.

Q3. Can file input also be transmitted as FormData? A. Yes, and it is automatically encoded as multipart/form-data.

Example files

The runnable files used in this lesson. Copy them into your own project and experiment.

src/01_input_submit.jsJavaScript

/**
 *input and submit events.
 */
const form = document.querySelector("#loginForm");
const email = form.querySelector("[name=email]");

email.addEventListener("input", (e) => {
  console.log("Typing:", e.target.value);
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Form submitted");
});

src/02_validation.jsJavaScript

/**
 *Utilize HTML5 verification API.
 */
const form = document.querySelector("#loginForm");
form.addEventListener("submit", (e) => {
  if (!form.checkValidity()) {
    e.preventDefault();
    form.reportValidity();
    console.log("Verification failed");
  } else {
    console.log("Verification passed");
  }
});

src/03_formdata.jsJavaScript

/**
 *Collect values at once with FormData.
 */
const form = document.querySelector("#loginForm");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }
  const data = new FormData(form);
  for (const [key, value] of data) {
    console.log(`${key} = ${value}`);
  }
});

src/04_controlled.jsJavaScript

/**
 *JavaScript controls input (forces uppercase letters).
 */
const username = document.querySelector("[name=username]");
const echo = document.querySelector("#echo");

username.addEventListener("input", (e) => {
  const upper = e.target.value.toUpperCase();
  e.target.value = upper;
  echo.textContent = `Current value: ${upper}`;
});

src/index.htmlHTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
<title>Forms and input</title>
  </head>
  <body>
    <form id="loginForm">
<label>Email <input type="email" name="email" required /></label>
<label>Password <input type="password" name="password" required minlength="4" /></label>
<label>Name <input type="text" name="username" /></label>
<label><input type="checkbox" name="remember" /> automatic login</label>
<button type="submit">Submit</button>
    </form>
    <p id="echo"></p>

    <script src="01_input_submit.js"></script>
    <script src="02_validation.js"></script>
    <script src="03_formdata.js"></script>
    <script src="04_controlled.js"></script>
  </body>
</html>

Assignment

Create a form to input email and password:

Prevent refresh when submitting.
Collect the values with FormData and output them to the console.
If the value is empty, submission is blocked.

The reference solution is shown below.

Show the reference solution

Try the assignment yourself first — comparing your attempt with a working solution is where most of the learning happens.

homework_01.htmlHTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
<title>Assignment 20-1</title>
  </head>
  <body>
    <form id="login">
<label>Email <input type="email" name="email" required /></label>
<label>Password <input type="password" name="password" required /></label>
<button type="submit">Log in</button>
    </form>
    <script src="homework_01.js"></script>
  </body>
</html>

homework_01.jsJavaScript

/**
 *When submitting a form, the value is output as FormData.
 */
const form = document.querySelector("#login");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }
  const data = new FormData(form);
  for (const [key, value] of data) {
    console.log(`${key}: ${value}`);
  }
});

Forms & Input