Templates
Name form
Collect a full name as separate elements of data.
<form class="usa-form usa-form--large margin-bottom-3">
<fieldset class="usa-fieldset">
<legend class="usa-legend usa-legend--large">Name</legend>
<label class="usa-label" for="given-name">First or given name</label>
<div class="usa-hint" id="gnHint">For example, Jose, Darren, or Mai</div>
<input
class="usa-input usa-input--xl"
id="given-name"
name="first-name"
aria-describedby="gnHint"
/>
<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="family-name">Last or family name</label>
<div class="usa-hint" id="lnHint">
For example, Martinez Gonzalez, Gu, or Smith
</div>
<input
class="usa-input usa-input--xl"
id="family-name"
name="last-name"
aria-describedby="lnHint"
/>
</fieldset>
</form>
<form class="usa-form usa-form--large margin-bottom-3">
<fieldset class="usa-fieldset">
<legend class="usa-legend usa-legend--large">Full Name</legend>
<label class="usa-label" for="full-name">Full name</label>
<div class="usa-hint" id="fnHint">
For example, Prof. Madeline Martinez Hernandez
</div>
<input
class="usa-input usa-input--xl"
id="full-name"
name="full-name"
aria-describedby="fnHint"
/>
</fieldset>
</form>
<form class="usa-form usa-form--large">
<fieldset class="usa-fieldset">
<legend class="usa-legend usa-legend--large">Preferred name</legend>
<label class="usa-label" for="preferred-name"
>I prefer to be addressed as</label
>
<div class="usa-hint" id="pnHint">
For example, Dr. Gu, Mrs. Schmidt, Alix Martinez
</div>
<input
class="usa-input usa-input--xl"
id="preferred-name"
name="preferred-name"
aria-describedby="pnHint"
/>
</fieldset>
</form>Guidance
When to use the name form template
- You need separate data elements. Follow this pattern when you need to ask for a user’s name as part of your service. Only ask for a name if you need it.
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
- Label each field. Be sure each field is properly labeled.
- 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 guidance
- Follow input guidance. These text fields should follow the accessibility guidelines for all text inputs.
- Customization. As you customize, make sure you follow accessibility guidelines for form templates and the accessibility guidelines for form controls.
Related
- Name pattern
Package
-
Package usage:
@forward "usa-form-templates";
