1.15.c — Forms, Inputs & preventDefault

In one sentence: Forms gather user data — you read values from controls, validate before sending, and use preventDefault() on the submit event when you want to handle submission in JavaScript instead of a full page reload.

Navigation: ← 1.15.b — Mouse, Keyboard, Scroll · 1.15.d — classList & Events →

---

1. Accessing form data

Named elements on the form

<form id="signup">
  <input name="email" type="email" />
  <button type="submit">Join</button>
</form>

const form = document.querySelector("#signup");
const email = form.elements.email.value; // or form.elements["email"]

HTMLFormElement.elements is like a collection of named controls — fast for small forms.

FormData (modern, great for fetch)

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(form);
  const email = data.get("email");
});

---

2. Validating forms

Layer	Role
HTML5	required, type="email", minlength, pattern — browser blocks submit if invalid
JS	Custom rules, async checks, show inline errors

form.addEventListener("submit", (e) => {
  e.preventDefault(); // SPA / fetch path — you own submission
  if (!form.checkValidity()) {
    form.reportValidity(); // show built-in validation UI
    return;
  }
  // …valid: send with fetch(), etc.
});

checkValidity() / reportValidity() integrate with built-in constraint validation.

---

3. submit event and preventDefault()

form.addEventListener("submit", (event) => {
  event.preventDefault(); // stop full page navigation / reload
  // send with fetch(), show SPA route, etc.
});

Without preventDefault, the browser performs the default submit (GET/POST navigation or download depending on action / method).

---

4. change vs input

Event	When
change	Control loses focus after value changed (<select>, text after blur), or committed choice
input	Every keystroke in <input>, <textarea>, contenteditable — live search, character counters

emailInput.addEventListener("input", () => {
  console.log(emailInput.value);
});

---

5. onsubmit, onchange (handler attributes / properties)

HTML:

<form onsubmit="return false;">  <!-- legacy pattern — avoid -->

JS property:

form.onsubmit = (e) => { e.preventDefault(); };

Approach	Pros / cons
addEventListener	Multiple listeners, easier testing, separation of concerns — preferred
onsubmit / onchange attributes	Quick demos; mixes behavior in HTML; CSP / security concerns with inline strings — avoid in production
.onsubmit = fn	Only one handler at a time (overwrites)

Curriculum note: know onsubmit / onchange for reading legacy code and exams; write new code with addEventListener.

---

6. Key takeaways

1. FormData + fetch is the modern data path; elements is fine for small forms.
2. submit + preventDefault = SPA / AJAX submission pattern.
3. input for live feedback; change for committed values.

---

Explain-It Challenge

Explain without notes:

1. Why call preventDefault() on submit when posting with fetch?
2. When would you listen to input instead of change on a text field?
3. Why is addEventListener usually better than form.onsubmit = …?

---

Navigation: ← 1.15.b — Mouse, Keyboard, Scroll · 1.15.d — classList & Events →