18F/web-design-standards

<form class="usa-form usa-form--large margin-bottom-3">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Name</legend>
    <label class="usa-label" for="given-name">First or given name</label>
    <div class="usa-hint" id="gnHint">For example, Jose, Darren, or Mai</div>
    <input class="usa-input usa-input--xl" id="given-name" name="first-name" aria-describedby="gnHint">
    <label class="usa-label" for="middle-name">Middle name</label>
    <input class="usa-input usa-input--xl" id="middle-name" name="middle-name">
    <label class="usa-label" for="family-name">Last or family name</label>
    <div class="usa-hint" id="lnHint">For example, Martinez Gonzalez, Gu, or Smith</div>
    <input class="usa-input usa-input--xl" id="family-name" name="last-name" aria-describedby="lnHint">
  </fieldset>
</form>
<form class="usa-form usa-form--large margin-bottom-3">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Full Name</legend>
    <label class="usa-label" for="full-name">Full name</label>
    <div class="usa-hint" id="fnHint">For example, Prof. Madeline Martinez Hernandez</div>
    <input class="usa-input usa-input--xl" id="full-name" name="full-name" aria-describedby="fnHint">
  </fieldset>
</form>
<form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Preferred name</legend>
    <label class="usa-label" for="preferred-name">I prefer to be addressed as</label>
    <div class="usa-hint" id="pnHint">For example, Dr. Gu, Mrs. Schmidt, Alix Martinez</div>
    <input class="usa-input usa-input--xl" id="preferred-name" name="preferred-name" aria-describedby="pnHint">
  </fieldset>
</form>