<label>

Labels associate text descriptions with form controls.

<input> can be nested inside a <label> or associated externally using for/id.

Input inside Label

Wrapping an input inside a label implicitly associates them.

<label>
  First name
  <input name="first_name" placeholder="First name" autocomplete="given-name" />
</label>
<label>
  Email
  <input type="email" name="email" placeholder="Email" autocomplete="email" />
</label>

Input outside Label

Use for on the label and a matching id on the input to associate them explicitly.

<label for="first_name">First name</label>
<input name="first_name" id="first_name" placeholder="First name" autocomplete="given-name" />
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Email" autocomplete="email" />

For helper text using <small>, see <small>.