Forms & User Input

Forms are how applications receive data: logins, search boxes, checkouts, settings. This chapter covers reading input values, validating before submission, the FormData API, and keeping the browser's built-in validation on your side — with the accessibility habits that make forms usable by everyone.

Reading values

const email = document.querySelector('#email');
const age   = document.querySelector('#age');
const agree = document.querySelector('#terms');

console.log(email.value);      // → live string of what the user typed
console.log(age.valueAsNumber);// → 25 (number, or NaN if invalid)
console.log(agree.checked);    // → true / false (checkboxes & radios)
console.log(agree.type);       // → 'checkbox'

Text-like inputs expose .value (always a string — convert with Number() or parseFloat()); checkboxes and radios use .checked; <select> uses the chosen option's .value.

The input vs change events

// input — fires on every keystroke/paste (live feedback)
searchInput.addEventListener('input', (e) => {
  console.log(`typing: ${e.target.value}`);
});

// change — fires when the value is committed (blur, checkbox, radio, select)
agree.addEventListener('change', (e) => {
  submitBtn.disabled = !e.target.checked;
});

Reading selects and radio groups

const plan = document.querySelector('#plan');
plan.addEventListener('change', () => console.log(plan.value));   // selected option value

const selected = document.querySelector('input[name="size"]:checked');
console.log(selected?.value ?? 'none selected');

Radio buttons share a name; exactly one in the group can be checked — query input[name="x"]:checked to find it.

Intercepting submission

const form = document.querySelector('#signup');

form.addEventListener('submit', (e) => {
  e.preventDefault();                        // ← the essential line

  const data = Object.fromEntries(new FormData(form));
  console.log(data);
  // → { email: 'a@b.c', plan: 'pro' }
});

Expected output: the page does not reload; you receive a plain object of all named fields. (Classic multi-part encoding without JS still works too — <form action="/signup" method="post"> — progressive enhancement at its best.)

FormData: the whole-form shortcut

const fd = new FormData(form);
fd.append('source', 'landing');               // add extra entries
fd.getAll('tags');                            // multi-value fields (checkbox arrays)

// To JSON (FormData itself is not JSON-serialisable):
const json = Object.fromEntries(fd.entries());

// Or send it directly to the server — the browser sets the multipart boundary:
fetch('/api/signup', { method: 'POST', body: fd });

Validation: three layers

1. HTML attributes (free and fast)

<input name="email" type="email" required minlength="5">
<input name="age" type="number" min="18" max="120">
<input name="code" pattern="[A-Z]{3}" title="3 uppercase letters">

The browser blocks submission and shows localised messages — zero JavaScript.

2. The Constraint Validation API

const email = form.elements.email;

if (!email.validity.valid) {
  console.log(email.validationMessage);      // browser's message
  if (email.validity.typeMismatch) console.log('Not a valid email');
  if (email.validity.tooShort)      console.log('Too short');
}

form.checkValidity();                          // whole form → boolean
email.setCustomValidity('Domain not allowed'); // custom rule (empty string = OK)

With <form novalidate> you can suppress the popup and render your own inline messages — modern form UIs do exactly this.

3. JavaScript validation (your rules)

function validateEmail(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);   // pragmatic check
}

function setError(field, message) {
  const el = document.querySelector(`#${field.id}-error`);
  el.textContent = message;                          // visible text…
  field.setAttribute('aria-invalid', message ? 'true' : 'false');
  field.setAttribute('aria-describedby', el.id);     // …and linked to the field
}

Validate on submit for hard rules, and lightly on input for instant feedback (do not yell at users while they are still typing their email).

Disabled buttons and enabling logic

const submit = form.querySelector('[type="submit"]');

const sync = () => {
  submit.disabled = !form.checkValidity();
};
form.addEventListener('input', sync);
sync();

Character counters

const bio = document.querySelector('#bio');
const out = document.querySelector('#bio-count');

bio.addEventListener('input', () => {
  out.textContent = `${bio.value.length} / ${bio.maxLength}`;
});

Accessibility essentials

• Every input needs a real <label for> (click-to-focus, screen-reader names).
• Error text: visible, adjacent, linked via aria-describedby, and aria-invalid="true".
• Do not rely on placeholder as the only label — it vanishes on typing.
• Keyboard order should follow visual order (tabindex hacks are a red flag).
• Touch targets ≥ 44 px (mirrors the responsive rules in Responsive Design).

Common mistakes

• Missing preventDefault — the page reloads and your handler's state evaporates.
• Reading .value once at load — it must be read inside the submit handler, after typing happens.
• Client-side validation as security — it is UX only; the server must always re-validate (edit the HTML in dev tools and any client check is gone).
• Forgetting the name attribute — fields without names are invisible to FormData and native submission.
• Blocking submit with JS only — no-JS users lose the form entirely; keep HTML validation as the floor.

Practice checklist

1. Build a signup form: HTML validation attributes + JS submit handler + inline error messages.
2. Add a live character counter with a visual warning above the limit.
3. Log a full form to an object two ways: manual reading and Object.fromEntries(new FormData(f)).
4. Disable submit until checkValidity() passes, and confirm keyboard-only flow works.

Forms fail — code fails. Learning to handle failure gracefully is next: Error Handling & Debugging.