Templates

Name form

Collect a full name as separate elements of data.

Name

Required fields are marked with an asterisk (*).

<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"
      type="text"
    />

    <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"
      type="text"
      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"
      type="text"
    />

    <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"
      type="text"
      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 dropdowns. Leave the title and suffix fields as text boxes instead of offering dropdowns. 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

Package

  • Package usage: @import usa-form-templates
  • Requires: required, global