Basic Input

<!--
  The three parts of a text field, in the order a screen reader meets them:
  the label names it, the input is it, and the helper text explains it. The
  helper is wired with aria-describedby rather than left floating next to the
  box - otherwise it is announced to nobody, which is the one audience that
  cannot see it sitting there.
-->
<div class="field">
  <label class="field__label" for="field-email">Email address</label>
  <input
    class="field__input"
    id="field-email"
    name="email"
    type="email"
    autocomplete="email"
    placeholder="you@example.com"
    aria-describedby="field-email-help"
  />
  <p class="field__help" id="field-email-help">We only use this to send receipts.</p>
</div>