HTML Forms — Inputs & Validation Basics

<form action="/submit-signup" method="POST">
  <input type="text" name="email">
  <button type="submit">Sign up</button>
</form>

<input type="text">      <!-- plain single-line text -->
<input type="email">     <!-- validates a basic email SHAPE, shows an email keyboard on mobile -->
<input type="password">  <!-- masks characters as they're typed -->
<input type="number">    <!-- spinner arrows, numeric keyboard, rejects non-numeric text entry -->
<input type="tel">       <!-- numeric-leaning keyboard on mobile, NO format validation at all -->
<input type="url">       <!-- validates a basic URL shape -->
<input type="date">      <!-- a native date picker widget -->
<input type="checkbox">  <!-- boolean toggle -->
<input type="radio">     <!-- one choice from a group (Part 07 of the next module covers grouping) -->
<input type="hidden">    <!-- submitted with the form, never shown or editable by the user -->

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

<!-- Clicking the WORD "Email address" now focuses the input — try it in a real browser -->

<label>
  Email address
  <input type="email" name="email">
</label>
<!-- No "for"/"id" pairing needed — the wrapping relationship IS the association -->

<input type="email" name="email" placeholder="Email address">
<!-- Looks fine visually. Has NO accessible name. A screen reader announces "edit text, blank". -->

<input type="email" name="email" required>
<input type="number" name="age" min="13" max="120">
<input type="password" name="password" minlength="8" maxlength="64" required>

<input type="text" name="zip" pattern="[0-9]{5}" title="A 5-digit ZIP code" required>

<input type="text" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       title="Format: 123-456-7890"
       placeholder="123-456-7890">

input:invalid {
  border-color: #ff4757;
}

input:valid {
  border-color: #00e676;
}

/* An empty required field is :invalid the instant the page loads — this
   often means every required field shows red before the user has typed
   anything at all, which usually reads as broken rather than helpful */
input:placeholder-shown:invalid {
  border-color: initial;  /* suppress the red state until the user actually interacts */
}

A newly redesigned signup form visually looks identical to the old one — same fields, same layout. Support starts getting tickets from users saying their company name never shows up anywhere after signing up, even though they clearly typed it in.

<label>Company name</label>
<input type="text" id="company" placeholder="Acme Inc.">
<!-- no "name" attribute on the input at all -->

What actually happened

The designer who rebuilt the form's markup copied the visual structure carefully but dropped the name attribute on several inputs during the rewrite — without it, the browser simply never includes that field in the submitted form data at all, no error, no warning, nothing visibly different in the UI. The field renders, accepts input, looks completely normal, and is silently absent from every single submission. The team's own retrospective: "the browser did exactly what we told it — we just told it to submit a form with an unnamed field, which means submit nothing for that field at all."