Platform under construction

Events & Forms

Advanced

Forms

Forms collect structured input. JavaScript can enhance them, but HTML gives forms their foundation.

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

Events & Forms

Start with real form HTML, then enhance with JavaScript.

A form is more than a group of inputs. It has submission behavior, validation, labels, names and browser support built in.

JavaScript can intercept submit, read values with FormData and show custom feedback without abandoning the native form model.

Every input that should be submitted needs a name. Every visible input should have a label.

form element

Groups fields and handles submission.

label

Connects text to a form control.

name attribute

Defines the key used in submitted data.

FormData

Reads form values as key/value pairs.

Examples

Event code should respect how people actually use the interface.

Use labels, names and FormData

<label>Title <input name="title"></label>

const data = new FormData(form);
const title = data.get("title");

Reading fields by placeholder text

<input placeholder="Title">

// No label, no name, weak accessibility and weak submission.

Code patterns

Reusable examples for quick reference.

These examples are the event patterns you will reuse constantly: listen, inspect, prevent, delegate, validate and submit.

Submit listener

Handle form submission.

form.addEventListener("submit", event => {
  event.preventDefault();
});

Read FormData

Collect named field values.

const data = new FormData(form);
const title = data.get("title");

Reset form

Return fields to default values.

form.reset();

Submit button

Use a real submit button.

<button type="submit">Save</button>

Rules that matter

Make interaction predictable.

Events are user-facing code. Good handlers stay small, respect native behavior and keep visual, semantic and data state aligned.

Use real form elements

They provide browser behavior for free.

Label every visible input

Labels improve usability and accessibility.

Name fields that submit

FormData depends on name attributes.

Use submit events

Do not handle only button clicks.

Avoid placeholder-only labels

Placeholders disappear and are not enough.

Keep progressive enhancement in mind

A form can still have a real action later.

Production thinking

Strong event handling makes an interface feel reliable instead of accidental.

Why does this matter?

Forms are a built-in structured-data system. Ignoring that means rebuilding weaker behavior by hand.

Accessibility

Labels, fieldsets, errors and focus behavior are essential for form usability.

Production note

Production forms should validate, submit, show errors and recover from failures predictably.

SEO note

Forms do not usually drive SEO directly, but accessible forms improve user success and trust.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a required input.
Call form.reset after rendering output.
Add a checkbox and inspect its FormData behavior.

Practice assignment

Do this before moving to the next topic.

Create a labelled input with a name.
Listen for submit.
Read values with FormData.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Forms.