A form with no labels

Click or Tab into a field. The placeholder vanishes, and nothing is left to say what the field is for. A screen reader announces "edit text" with no name.

Example

Markup

Edit the HTML. The example above is live in this page, so Tab and a screen reader read it the same way they would on any other site.

HTML for the example

<form class="lab-form" data-demo-form novalidate autocomplete="off">
  <input type="text" placeholder="Full name" autocomplete="off">
  <input type="text" placeholder="Email" autocomplete="off">
  <p class="lab-hint lab-hint--coloronly">* Required</p>
  <button type="submit" class="lab-btn">Sign up</button>
  <p class="lab-status" data-form-status></p>
</form>

<form class="lab-form" data-demo-form novalidate autocomplete="off">
  <input type="text" placeholder="Full name" autocomplete="off">
  <input type="text" placeholder="Email" autocomplete="off">
  <p class="lab-hint lab-hint--coloronly">* Required</p>
  <button type="submit" class="lab-btn">Sign up</button>
  <p class="lab-status" data-form-status></p>
</form>