Forms & Form Events

1
<form id="signup-form">
2
  <div>
3
    <label for="name">Name:</label>
4
    <input type="text" id="name" name="name" required />
5
  </div>
6
  <div>
7
    <label for="email">Email:</label>
8
    <input type="email" id="email" name="email" required />
9
  </div>
10
  <button type="submit">Sign Up</button>
11
</form>
12

13
<div id="message"></div>

1
const form = document.getElementById("signup-form");
2
const message = document.getElementById("message");
3

4
form.addEventListener("submit", (event) => {
5
  event.preventDefault(); // prevent page reload
6

7
  const formData = new FormData(form);
8
  const data = Object.fromEntries(formData);
9

10
  message.textContent = `Welcome, ${data.name}! Check your email at ${data.email}.`;
11
});

1
form.addEventListener("submit", (event) => {
2
  event.preventDefault();
3

4
  const formData = new FormData(form);
5

6
  // Get individual values
7
  console.log(formData.get("name"));   // "Alice"
8
  console.log(formData.get("email"));  // "alice@example.com"
9

10
  // Check if a field exists
11
  console.log(formData.has("name")); // true
12

13
  // Get all values for a field (checkboxes, multi-select)
14
  formData.getAll("hobbies"); // ["reading", "coding"]
15

16
  // Iterate all entries
17
  for (const [key, value] of formData) {
18
    console.log(key, value);
19
  }
20

21
  // Convert to plain object
22
  const data = Object.fromEntries(formData);
23
  console.log(data); // { name: "Alice", email: "alice@example.com" }
24

25
  // Send as JSON
26
  fetch("/api/users", {
27
    method: "POST",
28
    headers: { "Content-Type": "application/json" },
29
    body: JSON.stringify(data),
30
  });
31
});

1
form.addEventListener("submit", (event) => {
2
  event.preventDefault();
3
  // process form data
4
});

1
const nameInput = document.getElementById("name");
2
const preview = document.getElementById("preview");
3

4
nameInput.addEventListener("input", () => {
5
  preview.textContent = nameInput.value || "Your name will appear here";
6
});

1
emailInput.addEventListener("change", () => {
2
  // Fires when user finishes editing and clicks away
3
  validateEmail(emailInput.value);
4
});
5

6
selectInput.addEventListener("change", () => {
7
  console.log("Selected:", selectInput.value);
8
});

1
input.addEventListener("focus", () => {
2
  input.parentElement.classList.add("focused");
3
});
4

5
input.addEventListener("blur", () => {
6
  input.parentElement.classList.remove("focused");
7
  // Good time to validate (after user finishes)
8
  validateField(input);
9
});

1
<form>
2
  <input type="text" required minlength="2" maxlength="50" />
3
  <input type="email" required />
4
  <input type="number" min="18" max="120" />
5
  <input type="url" />
6
  <input pattern="[A-Za-z]+" title="Letters only" />
7
</form>

1
const input = document.getElementById("name");
2

3
// Check validity
4
console.log(input.validity.valid); // true/false
5
console.log(input.validity.tooShort);
6
console.log(input.validity.valueMissing);
7
console.log(input.validationMessage); // browser's error message
8

9
// Custom validation
10
input.setCustomValidity(""); // clear custom error
11
input.setCustomValidity("This name is already taken"); // set error
12

13
// Report validity visually
14
input.reportValidity();

1
const form = document.getElementById("signup-form");
2
const emailInput = document.getElementById("email");
3
const passwordInput = document.getElementById("password");
4
const errors = document.getElementById("errors");
5

6
function validateField(input) {
7
  const error = input.parentElement.querySelector(".error");
8
  if (!error) return true;
9

10
  if (input.validity.valid) {
11
    error.textContent = "";
12
    input.classList.remove("invalid");
13
    return true;
14
  }
15

16
  // Custom error messages
17
  if (input.validity.valueMissing) {
18
    error.textContent = `${input.name} is required`;
19
  } else if (input.validity.typeMismatch) {
20
    error.textContent = `Please enter a valid ${input.type}`;
21
  } else if (input.validity.tooShort) {
22
    error.textContent = `Minimum ${input.minLength} characters required`;
23
  }
24

25
  input.classList.add("invalid");
26
  return false;
27
}
28

29
form.addEventListener("submit", (event) => {
30
  event.preventDefault();
31

32
  // Validate all fields
33
  const inputs = form.querySelectorAll("input, select, textarea");
34
  let isValid = true;
35

36
  inputs.forEach((input) => {
37
    if (!validateField(input)) {
38
      isValid = false;
39
    }
40
  });
41

42
  if (isValid) {
43
    const formData = new FormData(form);
44
    console.log("Form submitted:", Object.fromEntries(formData));
45
  }
46
});
47

48
// Real-time validation
49
emailInput.addEventListener("blur", () => validateField(emailInput));
50
passwordInput.addEventListener("input", () => validateField(passwordInput));

1
<form id="password-form">
2
  <div class="field">
3
    <label for="password">Password</label>
4
    <input type="password" id="password" name="password"
5
           minlength="8" required />
6
    <ul class="password-requirements">
7
      <li id="req-length" class="invalid">At least 8 characters</li>
8
      <li id="req-number" class="invalid">Contains a number</li>
9
      <li id="req-upper" class="invalid">Contains uppercase letter</li>
10
    </ul>
11
  </div>
12
</form>

1
const passwordInput = document.getElementById("password");
2

3
passwordInput.addEventListener("input", () => {
4
  const value = passwordInput.value;
5

6
  toggleRequirement("req-length", value.length >= 8);
7
  toggleRequirement("req-number", /\d/.test(value));
8
  toggleRequirement("req-upper", /[A-Z]/.test(value));
9

10
  if (passwordInput.validity.valid) {
11
    passwordInput.classList.add("valid");
12
    passwordInput.classList.remove("invalid");
13
  } else {
14
    passwordInput.classList.remove("valid");
15
    passwordInput.classList.add("invalid");
16
  }
17
});
18

19
function toggleRequirement(id, met) {
20
  const el = document.getElementById(id);
21
  el.className = met ? "valid" : "invalid";
22
}

.valid { color: green; }
.valid::before { content: "✓ "; }
.invalid { color: #999; }
.invalid::before { content: "✗ "; }

1
<label><input type="checkbox" name="newsletter" value="weekly" checked /> Weekly Newsletter</label>
2
<label><input type="checkbox" name="newsletter" value="daily" /> Daily Digest</label>

1
// Single checkbox (boolean)
2
const agree = document.getElementById("agree");
3
console.log(agree.checked); // true/false
4

5
// Multiple checkboxes
6
form.addEventListener("submit", (e) => {
7
  e.preventDefault();
8
  const formData = new FormData(form);
9
  const newsletters = formData.getAll("newsletter");
10
  console.log("Selected:", newsletters); // ["weekly", "daily"]
11
});

1
<label><input type="radio" name="plan" value="free" checked /> Free</label>
2
<label><input type="radio" name="plan" value="pro" /> Pro</label>
3
<label><input type="radio" name="plan" value="enterprise" /> Enterprise</label>

1
form.addEventListener("submit", (e) => {
2
  e.preventDefault();
3
  const plan = new FormData(form).get("plan");
4
  console.log("Selected plan:", plan); // "free", "pro", or "enterprise"
5
});

1
<select name="country" id="country">
2
  <option value="">Select a country</option>
3
  <option value="US">United States</option>
4
  <option value="UK">United Kingdom</option>
5
  <option value="JP">Japan</option>
6
</select>
7

8
<select name="skills" multiple>
9
  <option value="js">JavaScript</option>
10
  <option value="py">Python</option>
11
  <option value="rb">Ruby</option>
12
</select>

1
// Single select
2
console.log(document.getElementById("country").value); // "US"
3

4
// Multiple select
5
const skills = new FormData(form).getAll("skills");
6
console.log(skills); // ["js", "py"]

1
const formState = {
2
  name: "",
3
  email: "",
4
  password: "",
5
  newsletter: false,
6
  plan: "free",
7
};
8

9
const form = document.getElementById("signup-form");
10

11
// Sync state with form on every input
12
form.addEventListener("input", (event) => {
13
  const { name, value, type, checked } = event.target;
14
  formState[name] = type === "checkbox" ? checked : value;
15
  console.log("Current state:", formState);
16
});
17

18
form.addEventListener("submit", (event) => {
19
  event.preventDefault();
20
  console.log("Final data:", formState);
21
  // Submit formState to API
22
});

1
// Reset to initial values
2
form.reset();
3

4
// Clear all fields manually
5
form.querySelectorAll("input").forEach((input) => {
6
  if (input.type === "checkbox" || input.type === "radio") {
7
    input.checked = false;
8
  } else {
9
    input.value = "";
10
  }
11
});