Name form

Collect a full name as separate elements of data

Name 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend">Name</legend>
    <label class="usa-label" for="title">Title <span class="usa-hint">(optional)</span></label>
    <input class="usa-input usa-input--small" id="title" name="title" type="text">

    <label class="usa-label" for="first-name">First name</label>
    <input class="usa-input" id="first-name" name="first-name" type="text" required aria-required="true">

    <label class="usa-label" for="middle-name">Middle name <span class="usa-hint">(optional)</span></label>
    <input class="usa-input" id="middle-name" name="middle-name" type="text">

    <label class="usa-label" for="last-name">Last name</label>
    <input class="usa-input" 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