Name form
Collect a full name as separate elements of data
<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
- Customize accessibly. As you customize this form template, ensure it continues to follow the accessibility guidelines for form templates and the accessibility guidelines for form controls.
Package information
-
Package usage:
@import form-templates
-
Requires:
required
,global