HTML Form

Introduction

HTML forms are the primary way websites collect information from users—contact messages, logins, surveys, and search queries all start with a <form> element wrapping interactive controls.

This tutorial covers form structure, attributes, validation, submission, JavaScript handling with FormData, common mistakes, and six hands-on examples you can edit in the Try It editor.

What You’ll Learn

What Is an HTML Form?

An HTML form is a section of a document that contains controls where users enter or choose data. When the form is submitted, the browser gathers values from named fields and sends them to a destination URL or passes them to JavaScript.

Forms connect the front end to server-side scripts, APIs, or client-side logic. Every control that should contribute data needs a name attribute, and accessible forms pair each input with a <label>. See the form tag reference for the full attribute list.

Form Elements

A typical form combines several HTML elements, each with a specific role:

• <form> — wraps all controls and defines where data goes.
• <label> — describes a field; link it with for matching the input’s id.
• <input> — single-line fields (text, email, password, etc.).
• <textarea> — multi-line text entry.
• <button> — triggers submission or other actions.

Here is a complete contact form with all core elements nested correctly:

<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name">

  <label for="email">Email</label>
  <input type="email" id="email" name="email">

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Submit</button>
</form>

Learn more about individual controls in the HTML Inputs tutorial and the textarea and button tag references.

Form Attributes

The <form> element itself accepts attributes that control submission behavior:

action

The URL where form data is sent when submitted. If omitted, the current page URL is used.

<form action="/submit" method="post">
  <!-- fields -->
</form>

method

How data is sent. get appends values to the URL; post sends them in the request body (preferred for sensitive data).

<form action="/search" method="get">
  <input type="search" name="q">
  <button type="submit">Search</button>
</form>

enctype

Sets the encoding type. Use multipart/form-data when uploading files; otherwise the default application/x-www-form-urlencoded is fine.

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="photo">
  <button type="submit">Upload</button>
</form>

name

Identifies the form for scripting or when multiple forms exist on one page. Rarely required for basic sites but useful in complex apps.

<form name="loginForm" action="/login" method="post">
  <!-- fields -->
</form>

Form Validation

HTML5 provides built-in validation attributes on inputs. The browser checks values before allowing submission:

• required — field must not be empty.
• pattern — value must match a regular expression.
• min / max — bounds for numbers and dates.
• type — email, url, and number add format checks.

Keep all validated fields inside the form. Closing </form> before inputs breaks both layout and validation:

<form>
  <label for="username">Username</label>
  <input type="text" id="username" name="username"
    required pattern="[A-Za-z]{5,}" title="At least 5 letters">

  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="1" max="100" required>

  <button type="submit">Register</button>
</form>

Client-side validation improves UX but is not secure. Always re-validate on the server.

Form Submission

When the user clicks a submit button or presses Enter in a text field, the browser sends the form data to the action URL using the specified method.

The submit button must be inside the form. A button placed after </form> will not submit the form:

<form action="/submit" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Send</button>
</form>

Use type="button" for buttons that should not submit (e.g. “Cancel” or “Add row”). Only type="submit" (the default for <button> inside a form) triggers submission.

Handling Form Data

JavaScript can intercept submission, read values without a page reload, and send data to an API. Use FormData to collect all named fields:

const form = document.getElementById("contactForm");

form.addEventListener("submit", function (event) {
  event.preventDefault();

  const data = new FormData(form);
  console.log("Name:", data.get("name"));
  console.log("Email:", data.get("email"));

  // Send to server with fetch(data) or display a success message
});

• event.preventDefault() — stops the browser from navigating away.
• new FormData(form) — reads all named controls in one object.
• data.get("name") — retrieves a single field value by name.

Common Pitfalls

• Missing name — fields without name are excluded from submission data.
• Closing form too early — inputs or buttons outside <form> are not submitted.
• No labels — placeholders are not substitutes; use <label for="id">.
• Client-only validation — always validate again on the server for security.
• Wrong enctype — file uploads need multipart/form-data.
• Multiple submit buttons — only the clicked button’s name/value is sent; plan accordingly.

Examples Gallery

Six examples from a basic contact form to a complete page with JavaScript handling. Each includes View Output and Try It Yourself.

<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name">

  <label for="email">Email</label>
  <input type="email" id="email" name="email">

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Submit</button>
</form>

<form action="/submit" method="post">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" required>

  <label for="password">Password</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Log in</button>
</form>

<form>
  <label for="username">Username</label>
  <input type="text" id="username" name="username"
    required pattern="[A-Za-z]{5,}" title="At least 5 letters">

  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="1" max="100" required>

  <button type="submit">Register</button>
</form>

<form>
  <label for="course">Choose a course</label>
  <select id="course" name="course" required>
    <option value="">-- Select --</option>
    <option value="html">HTML Basics</option>
    <option value="css">CSS Styling</option>
    <option value="js">JavaScript</option>
  </select>

  <label for="enroll-email">Your email</label>
  <input type="email" id="enroll-email" name="email" required>

  <button type="submit">Enroll</button>
</form>

<form>
  <fieldset>
    <legend>Experience level</legend>
    <input type="radio" id="beginner" name="level" value="beginner">
    <label for="beginner">Beginner</label>
    <input type="radio" id="advanced" name="level" value="advanced">
    <label for="advanced">Advanced</label>
  </fieldset>

  <input type="checkbox" id="newsletter" name="newsletter" value="yes">
  <label for="newsletter">Email me updates</label>

  <button type="submit">Send survey</button>
</form>

<form id="contactForm" action="/submit" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

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

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send</button>
</form>

<script>
  document.getElementById("contactForm").addEventListener("submit", function (e) {
    e.preventDefault();
    const data = new FormData(this);
    console.log("Name:", data.get("name"));
  });
</script>

Best Practices