HTML Forms

Forms collect user input. A well-built form pairs every input with a label and lets the browser handle validation.

Form basics

The <form> element wraps all the fields. action and method describe where the data goes.

<form action="/signup" method="post">
  <!-- fields go here -->
</form>

Inputs

Different type values change behavior and validation automatically.

<input type="text" name="username" placeholder="pick a name" />
<input type="email" name="email" placeholder="you@example.com" />
<input type="password" name="password" />

Labels

Every input should have a <label> — it makes the field clickable and announces it to screen readers.

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

Buttons

A <button type="submit"> submits the form. type="button" does nothing by default — use it for JavaScript.

<button type="submit">Create account</button>

Validation

The browser can validate for free with required, minlength, and type-specific rules.

<input type="email" name="email" required />
<input type="password" name="password" minlength="8" />