HTML Forms

Understand the topic

A form collects values using named controls and sends them to a destination. Labels describe fields, name identifies a submitted value, and a submit button initiates submission. Browser validation helps people correct common mistakes, but the receiving server must validate again. This demonstration intercepts submission and shows the name locally; it does not save anything or send an email.

Worked example

<form id="join">
  <label for="full-name">Full name</label>
  <input id="full-name" name="full_name" autocomplete="name" required>
  <button type="submit">Preview registration</button>
</form>
<p id="result" role="status"></p>
<script>
document.querySelector("#join").addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  document.querySelector("#result").textContent = "Welcome, " + data.get("full_name") + ". This is a preview.";
});
</script>

The browser checks required before firing a successful submit event. FormData reads the name field because its control has a name. preventDefault keeps this demo on the page.

Practice

Add a required email field with an associated label and an email autocomplete value.

<label for="member-email">Email</label>
<input id="member-email" name="email" type="email" autocomplete="email" required>

Common mistake

A placeholder is not a label, and a field without name is normally omitted from the submitted form data.

HTML documentation