Handling Events and User Input

Events allow a script to respond to user actions.

<label for="team-filter">Filter teams</label>
<input id="team-filter" type="search">
<p id="filter-status" role="status"></p>

const filter = document.querySelector("#team-filter");
const status = document.querySelector("#filter-status");

filter.addEventListener("input", () => {
  const value = filter.value.trim();
  status.textContent = value
    ? `Filtering by: ${value}`
    : "Showing all teams";
});

Do not use JavaScript as the only validation for server-side operations. PHP must independently validate submitted values.

Accessible interactions

Use native buttons for actions, retain keyboard behaviour, give controls labels and announce important updates through an appropriate status region.

Check

• Event is attached to the intended control.
• Empty input is handled.
• Keyboard users can perform the action.
• Server-side validation still exists.
• Status changes are understandable.