Templates

Name form

Collect a full name as separate elements of data.

Name

Required fields are marked with an asterisk (*).

Title First name * Middle name Last name *

<form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Name</legend>
    <p>
      Required fields are marked with an asterisk (<abbr
        title="required"
        class="usa-hint usa-hint--required"
        >*</abbr
      >).
    </p>
    <label class="usa-label" for="title">Title</label>
    <input class="usa-input usa-input--sm" id="title" name="title" />
    <label class="usa-label" for="first-name"
      >First name
      <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label
    >
    <input
      class="usa-input usa-input--xl"
      id="first-name"
      name="first-name"
      required
      aria-required="true"
    />
    <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="last-name"
      >Last name
      <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label
    >
    <input
      class="usa-input usa-input--xl"
      id="last-name"
      name="last-name"
      required
      aria-required="true"
    />
  </fieldset>
</form>

<form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Name</legend>
    <p>
      Required fields are marked with an asterisk (<abbr
        title="required"
        class="usa-hint usa-hint--required"
        >*</abbr
      >).
    </p>
    <label class="usa-label" for="title">Title</label>
    <input class="usa-input usa-input--sm" id="title" name="title" />
    <label class="usa-label" for="first-name"
      >First name
      <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label
    >
    <input
      class="usa-input usa-input--xl"
      id="first-name"
      name="first-name"
      required
      aria-required="true"
    />
    <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="last-name"
      >Last name
      <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label
    >
    <input
      class="usa-input usa-input--xl"
      id="last-name"
      name="last-name"
      required
      aria-required="true"
    />
  </fieldset>
</form>

Guidance

When to use the name form template

• You need separate data elements. When you need to collect users’ full names and store the parts separately in a database.

When to consider something else

• You don’t need separate data elements. If you don’t need to parse out the separate pieces of a person’s name, consider letting them enter it into a single text field.

Usability guidance

• Avoid select elements. Leave the title and suffix fields as text boxes instead of offering select menus. There are many possible titles and suffixes; text boxes accommodate them all.
• Don’t restrict characters. Do not restrict the types of characters users can enter in any of these fields. Names can include characters outside the standard Roman alphabet.

Accessibility

• As you customize this form template, make sure it continues to follow the accessibility guidelines for form templates and the accessibility guidelines for form controls.

Package

• Package usage: @forward "usa-form-templates";