HTML Forms and Input Types Explained

Forms are how a web page collects information from a visitor — a login screen, a checkout page, a search box. HTML gives you a dedicated <form> element plus a wide range of <input> types that handle a surprising amount of validation and mobile-keyboard behavior for free, before a single line of JavaScript gets involved.

The Form Element and Basic Inputs

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

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

  <button type="submit">Sign Up</button>
</form>

This renders a simple two-field sign-up form with a submit button. The action attribute is the URL the data is sent to, and method="POST" means the data is sent in the request body rather than appended to the URL as a query string.

Labels Are Not Optional

The <label> element's for attribute must match the input's id. This isn't just a convention — it has real behavior: clicking the label text focuses the associated input, and screen readers announce the label whenever the user focuses that field. A form with unlabeled inputs is effectively unusable with assistive technology, no matter how good it looks visually.

Common Input Types

HTML5 added many specialized type values beyond plain text, each with built-in behavior:

<input type="number" min="1" max="10" />
<input type="date" />
<input type="checkbox" id="agree" />
<input type="radio" name="plan" value="basic" />
<input type="radio" name="plan" value="pro" />

type="number" shows a numeric keypad on mobile and adds increment/decrement arrows on desktop. type="date" gives you a native date picker with zero JavaScript. Radio buttons sharing the same name attribute become a mutually exclusive group — selecting one automatically deselects the others in that group.

Built-in Validation Attributes

Before you reach for JavaScript validation, HTML already covers the basics: required blocks submission until the field has a value, pattern accepts a regular expression the value must match, and type-specific inputs like email automatically reject text without an @ sign.

<input
  type="text"
  pattern="[A-Za-z]{3,}"
  title="At least 3 letters, no numbers"
  required
/>

If the visitor tries to submit with invalid input, the browser shows a native validation message and blocks the submission — no JavaScript required. This is a genuinely good first line of defense, though real applications still need to validate again on the server, since client-side validation can always be bypassed.

For deeper control over spacing and alignment inside a form, you'll typically reach for the same Flexbox techniques used to lay out any other group of elements.

---