HTML Recipes

Form (Basic)

Form fields are properly labeled using the label element. As the p element creates a thematic grouping of phrasing content it is appropriate to wrap the label and field pairs.

You can also wrap a form field in a label element, however having a separate label element may allow for easier styling.

<h2>Order Your Pizza</h2>
<form>
  <p>
    <label for="firstname">First Name</label>
    <input type="text" id="firstname" name="firstname" />
  </p>
  <p>
    <label for="lastname">Last Name</label>
    <input type="text" id="lastname" name="lastname" />
  </p>
</form>