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>

When to use a name form

  • 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 information

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